Подтвердить что ты не робот

Удалить метку/текст оси 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>
4b9b3361

Ответ 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);

}

Ответ 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;
}

Это также сохраняет советы инструмента.

Ответ 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 и не имеют времени для тщательного тестирования, поэтому лучше не нарушать ничего.