Удалить метку/текст оси x в файле chart.js
Как скрыть метку/текст оси x, отображаемую в chart.js?
Настройка scaleShowLabels:false
удаляет только метки оси y.
<script>
var options = {
scaleFontColor: "#fa0",
datasetStrokeWidth: 1,
scaleShowLabels : false,
animation : false,
bezierCurve : true,
scaleStartValue: 0,
};
var lineChartData = {
labels : ["1","2","3","4","5","6","7"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [1,3,0,0,6,2,10]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
</script>
Ответы
Ответ 1
UPDATE chart.js 2.1 и выше
new Chart(ctx, {
...
options:
{
scales:
{
xAxes: [{
display: false
}]
}
}
});
Ссылка: документация chart.js
Старый ответ (написанный, когда текущая версия была 1.0 beta) только для справки ниже:
Чтобы избежать отображения меток в chart.js
, вы должны установить scaleShowLabels : false
, а также не пропускать labels
:
<script>
var options = {
...
scaleShowLabels : false
};
var lineChartData = {
//COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
//labels : ["1","2","3","4","5","6","7"],
...
}
...
</script>
Ответ 2
var lineChartData = {
labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
,datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
window.onload = function(){
var options = {
scaleShowLabels : false // to hide vertical lables
};
var ctx = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, options);
}
Ответ 3
(этот вопрос является дубликатом В chart.js, возможно ли скрыть привязку по оси x/текст гистограммы при доступе с мобильного?)
Они добавили опцию, 2.1.4 (и, возможно, немного раньше), она имеет
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
}
Ответ 4
Теперь столкнулся с проблемой удаления ярлыков в Chartjs. Похоже, документация улучшена.
http://www.chartjs.org/docs/#getting-started-global-chart-configuration
Chart.defaults.global.legend.display = false;
глобальные настройки предотвращают отображение легенд во всех диаграммах. Поскольку этого было достаточно для меня, я использовал его. Я не уверен, как избежать легенд для отдельных графиков.
Ответ 5
Вдохновленный ответом на christutty, вот решение, которое модифицирует источник, но не проверено полностью. У меня еще не было никаких проблем.
В разделе по умолчанию добавьте эту строку вокруг строки 71:
// Boolean - Omit x-axis labels
omitXLabels: true,
Затем вокруг строки 2215 добавьте это в метод buildScale:
//if omitting x labels, replace labels with empty strings
if(Chart.defaults.global.omitXLabels){
var newLabels=[];
for(var i=0;i<labels.length;i++){
newLabels.push('');
}
labels=newLabels;
}
Это также сохраняет советы инструмента.
Ответ 6
Самое простое решение:
scaleFontSize: 0
см. chart.js Документ
знакомый вопрос
Ответ 7
Если вы хотите, чтобы метки были сохранены для всплывающей подсказки, но не отображались ниже столбцов, может оказаться полезным следующий хак. Я сделал это изменение для использования в приложении частной интрасети и не тестировал его на эффективность или побочные эффекты, но он сделал то, что мне нужно.
Примерно по строке 71 в chart.js добавьте свойство, чтобы скрыть метки бара:
// Boolean - Whether to show x-axis labels
barShowLabels: true,
В строке около 1500 используйте это свойство для подавления изменения this.endPoint(кажется, что другие части кода вычисления необходимы, поскольку фрагменты диаграммы исчезли или были отображены неправильно, если я отключил что-то большее, чем эта строка).
if (this.xLabelRotation > 0) {
if (this.ctx.barShowLabels) {
this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
} else {
// don't change this.endPoint
}
}
В строке 1644 используется свойство для подавления рендеринга меток:
if (ctx.barShowLabels) {
ctx.fillText(label, 0, 0);
}
Я хотел бы внести это изменение в источник Chart.js, но не знакомы с git и не имеют времени для тщательного тестирования, поэтому лучше не нарушать ничего.