在工具提示中显示标签,但在chartjs折线图中不显示在x轴上

Question

我目前正在使用带有chart.js的折线图,并且有一个看起来像这样的标签集["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"].我希望相关标签显示在图表的工具提示中,但只希望每个交替标签显示在图表的x轴上以防止拥挤.有没有办法实现这个目标？

我正在使用""替换我的数组中的每一个第二个值,但是当我从x轴中移除拥挤时,它不符合我在工具提示中显示标签的要求.

Answer 1

只需扩展折线图并在初始化后替换您不需要的xLabel

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        var xLabels = this.scale.xLabels
        xLabels.forEach(function (label, i) {
            if (i % 2 == 1)
                xLabels[i] = '';
        })
    }
});


var lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    datasets: [
        {
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLine = new Chart(ctx).LineAlt(lineChartData);

小提琴 - http://jsfiddle.net/ttz5t3dx/

Answer 2

对于想要在Chart JS V2上实现此目的的任何人,以下将起作用:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                var xLabels = data.ticks;

                xLabels.forEach(function (labels, i) {
                    if (i % 2 == 1){
                        xLabels[i] = '';
                    }
                });
            } 
        }]   
    }
}

然后像往常一样将options变量传递给:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`