如何在 Chart.Js 1.0.2 中限制 xAxis 标签？答案

【问题标题】：How to limit xAxis label in Chart.Js 1.0.2?如何在 Chart.Js 1.0.2 中限制 xAxis 标签？
【发布时间】：2017-04-09 17:07:12
【问题描述】：

我正在尝试使用 ChartJs 1.0.2 绘制一个 twitter 流，每分钟的推文情绪得分。一段时间后 xlables 会重叠。如何为有限数量的 xAxis 标签绘制图形以避免重叠。我正在使用 Apache Zeppelin 和 AngularJs 解释器进行绘图。代码如下。

    lineChartData = {}; //declare an object
    lineChartData.labels = []; //add 'labels' element to object (X axis)
    lineChartData.datasets = []; //add 'datasets' array element to object



    //FIRST GRAPH: score
    var line = 0
    y = [];
    lineChartData.datasets.push({}); //create a new line dataset
    dataset = lineChartData.datasets[line]
    dataset.fillColor = "rgba(0, 0, 0, 0)";
    dataset.strokeColor = "rgba(75,192,192,0.4)";
    dataset.lineColor = "rgba(75,192,192,0.4)";
    dataset.label = "Score"
    dataset.data = []; // value data

    angular.forEach(newValue, function(x) {

        y.push(x._3); 
        if (line === 0)
            lineChartData.labels.push(x._2); //adds x axis labels
    }) 

    lineChartData.datasets[line].data = y; //send new line data to dataset

    //end FIRST GRAPH: score






   var options = {

      responsive: true,

        animation: false,


        multiTooltipTemplate: function(dataset) {
            //console.log(dataset)
          return dataset.datasetLabel+ " : " + dataset.value ;
          dataset.strokeColor='red';
                   } ,


    }

    ctx = canvas.getContext("2d");
    myLineChart = new Chart(ctx).Line(lineChartData, options);
    var legend = myLineChart.generateLegend();
    $("#legendDiv").html(legend);
    //document.getElementById("legendDiv").innerHTML = legend;

})
 }


if (window.L) {
initMap();
 } else {
console.log('Loading Leaflet library');
var sc = document.createElement('script');
sc.type = 'text/javascript';
sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js';
sc.onload = initMap;
sc.onerror = function(err) { alert(err); }
document.getElementsByTagName('head')[0].appendChild(sc);
}

【问题讨论】：

同样的问题，但目前没有解决方案
@pro.mean 似乎没有针对此特定版本的解决方法。

标签： javascript angularjs charts chart.js

【解决方案1】：

我可以想到以下方法。

仅获取变量有限时间窗口的数据，但不获取所有数据。
将数据分组到大时间点
特定区间的数据示例

顺便说一句，将转换为数据的代码包装为可视化可能是值得的。更改为不同的图表或使用不同的绘图选项会更容易。

如果您对chart.js 没有强烈的偏好，请检查spark-highcharts 以查看它是否满足您的绘图需求，或者创建与chart.js 类似的包装器。

【讨论】：