Chart.Js 1.0.2でxAxisラベルを制限する方法は？

Question

私は、ChartJs 1.0.2を使用してtwitterのストリーミング、tweetの感情のスコアを毎分ベースでプロットしようとしています.xlablesはいつか重複しています。オーバーラップを避けるために、限られた数のxAxis Labelsに対してグラフをプロットするにはどうすればよいですか。私はプロットのために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

私は次のように考えることができます。

• 制限時間ウィンドウのデータのみを変数に取得しますが、すべてのデータを取得しません。
• グループデータのデータ例
• 大時点まで一定の間隔

ためところで、可視化データに変換するコードをラップする価値があるかもしれません。別のチャートに変更したり、別のプロットオプションを使用する方が簡単になります。

chart.jsを強く選択していない場合は、spark-highchartsをチェックしてプロットのニーズを満たしているかどうかを確認するか、chart.jsと同様のラッパーを作成します。