Question

我正在尝试使用ChartJs 1.0.2来绘制每分钟推特流量，推文情绪分数.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);
}

Answer 1

我可以想到以下方法。

仅获取有限时间窗口的数据到变量但不获取所有数据。
将数据分组到大时间点
某段时间间隔的数据示例

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

如果您对chart.js没有强烈的偏好，请检查spark-highcharts以查看它是否符合您的地图需求，或者为chart.js创建一个类似的包装。

如何限制Chart.Js 1.0.2中的xAxis标签？

1 个答案: