JsChart複数のラベルの凡例

Question

単純な時間グラフにはJSChartを使用しています。私は時間のラベルの量を設定するために彼らのドキュメンテーションに関する情報を発見していない。 私は一日に1つしか表示されません。深夜に好きです。

今、私はデータセットごとに1つの日付ラベルを取得します。それは多すぎます。

Example Image

JS関数は、チャート

_j(function() { 
    /* ChartJS 
    * ------- 
    * Here we will create a few charts using ChartJS 
    */ 


    var graphData = $graph_data; 
    var graphLabels = $graph_labels; 


    var lineChartData = { 
     labels: graphLabels, 
     datasets: [ 
      { 
       label: "Count", 
       fillColor: "rgba(210, 214, 222, 1)", 
       strokeColor: "rgb(60, 141, 188)", 
       pointColor: "rgba(210, 214, 222, 1)", 
       pointStrokeColor: "#c1c7d1", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: graphData 
      }, 
      { 
       label: "Call", 
       fillColor: "rgba(60,141,188,0.9)", 
       strokeColor: "rgba(255,0,0,0.8)", 
       pointColor: "#3b8bba", 
       pointStrokeColor: "rgba(60,141,188,1)", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(60,141,188,1)", 
       data: [28, 50, 50, 50, 50, 50, 90] 
      } 
     ] 
    }; 


    var lineChartOptions = { 
     //Boolean - If we should show the scale at all 
     showScale: true, 
     //Boolean - Whether grid lines are shown across the chart 
     scaleShowGridLines: false, 
     //String - Colour of the grid lines 
     scaleGridLineColor: "rgba(0,0,0,.05)", 
     //Number - Width of the grid lines 
     scaleGridLineWidth: 1, 
     //Boolean - Whether to show horizontal lines (except X axis) 
     scaleShowHorizontalLines: true, 
     //Boolean - Whether to show vertical lines (except Y axis) 
     scaleShowVerticalLines: true, 
     //Boolean - Whether the line is curved between points 
     bezierCurve: true, 
     //Number - Tension of the bezier curve between points 
     bezierCurveTension: 0.3, 
     //Boolean - Whether to show a dot for each point 
     pointDot: false, 
     //Number - Radius of each point dot in pixels 
     pointDotRadius: 4, 
     //Number - Pixel width of point dot stroke 
     pointDotStrokeWidth: 1, 
     //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
     pointHitDetectionRadius: 20, 
     //Boolean - Whether to show a stroke for datasets 
     datasetStroke: true, 
     //Number - Pixel width of dataset stroke 
     datasetStrokeWidth: 2, 
     //Boolean - Whether to fill the dataset with a color 
     datasetFill: false, 
     //String - A legend template 
     // legendTemplate: "<ul class='<%=name.toLowerCase()%>-legend'><% for (var i=0; i<datasets.length; i++){%><li><span style='background-color:<%=datasets[i].lineColor%>'></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>", 
     //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
     maintainAspectRatio: true, 
     //Boolean - whether to make the chart responsive to window resizing 
     responsive: true, 
     scales: { 
      xAxes: [{ 
       type: 'time', 
       time: { 
        displayFormats: { 
         'millisecond': 'MMM DD', 
         'second': 'MMM DD', 
         'minute': 'MMM DD', 
         'hour': 'MMM DD', 
         'day': 'MMM DD', 
         'week': 'MMM DD', 
         'month': 'MMM DD', 
         'quarter': 'MMM DD', 
         'year': 'MMM DD' 
        } 
       } 
      }] 
     } 

    }; 

    //------------- 
    //- LINE CHART - 
    //-------------- 
    var lineChartCanvas = document.getElementById("$chartID").getContext("2d"); 
    var lineChart = new Chart(lineChartCanvas); 
    lineChart.Line(lineChartData, lineChartOptions); 


}); 

PHPは、上記テンプレートを呼び出しを初期化します。

$graphTitle = "GRAPH API"; 
$chartID = "lineChartAPI"; 


$graph_data = json_encode($graph_data); 
//reverse Reihenfolge der Labels 
$graph_labels = json_encode($graph_labels); 

eval(get_template("start_stat_graph")); 
$data = $tpl; 

Answer 1

http://www.highcharts.com/これは設定がはるかに優れています。

Answer 2

This Post helped alot

だから、いくつかのx軸の凡例を回避するには、単にデータを操作することで、if文のみ例えば、単純な5％を持つすべての5番目のデータを設定します。