如何使用下面的代碼添加簡單的選項chartjs正確

林用於顯示我的chart.js之庫圖：如何使用下面的代碼添加簡單的選項chartjs正確

HTML部分：

<div style="width:60%"> 
<div> 
    <canvas id="canvas_all" height="450" width="600"></canvas> 
</div>

和腳本：

var lineChartDataAll = { 
     labels : <?php echo json_encode($all_date_label) ?>, 
     datasets : [ 
      { 
       label: "My First dataset", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : <?php echo json_encode($all_hum_data) ?> 
      }, 
      { 
       label: "My Second dataset", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : <?php echo json_encode($all_temp_data) ?> 
      } 
     ] 

    } 


window.onload = function(){ 

    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true 
    }); 

    var ctx_all = document.getElementById("canvas_all").getContext("2d"); 
    window.myLine = new Chart(ctx_all).Line(lineChartDataAll, { 
     responsive: true, 
     showXLabels: 10 
    }); 
}

現在，我有這個選項的問題：showXLabels：10

我是否正確使用此選項？

我想在X軸上只有一個視圖x（10）標籤......這就是目標。

現在的圖表顯示了所有X標籤...

來源

2015-06-06 user3882511

Chart.js沒有名爲showXLabels的選項。但是你可以自己添加一個。您是否想要將數據剪切到x以上，即如果您有11個數據點並且x = 10，您想要顯示1到10的標籤？ – potatopeelings

可以說我在x軸上有100個標籤。這看起來不太好。所以我認爲有一個選項只顯示x值的數量。讓我們說10，然後在圖下面只顯示10個x標籤。我認爲有一個選項看看這個：https：//github.com/nnnick/Chart.js/pull/521 – user3882511

的（問題）中引用的選項評論是PR 521尚未合併到主分支呢。這後來被製成了一個PR 897，這也沒有被合併。

所以，如果你想要這個功能，你應該使用上面的代碼。

這是一個小提琴 - http://jsfiddle.net/trhcafut/就是這麼做的。我剛剛在PR的Chart.Core和Chart.Line之後添加了以下代碼塊（最後滾動到JS塊的最後）。

var lineChartData = { 
    labels : ["January", "February", "March", "April", "May", "June", "July"], 
    datasets : [ 
     { 
      label: "My First dataset", 
      fillColor : "rgba(220,220,220,0.2)", 
      strokeColor : "rgba(220,220,220,1)", 
      pointColor : "rgba(220,220,220,1)", 
      pointStrokeColor : "#fff", 
      pointHighlightFill : "#fff", 
      pointHighlightStroke : "rgba(220,220,220,1)", 
      data : [65, 59, 80, 81, 56, 55, 40] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor : "rgba(151,187,205,0.2)", 
      strokeColor : "rgba(151,187,205,1)", 
      pointColor : "rgba(151,187,205,1)", 
      pointStrokeColor : "#fff", 
      pointHighlightFill : "#fff", 
      pointHighlightStroke : "rgba(151,187,205,1)", 
      data : [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
} 

var ctx_all = $("#canvas_all").get(0).getContext("2d"); 
window.myLine = new Chart(ctx_all).Line(lineChartData, { 
    showXLabels: 3 
});

請注意，如果您這樣做，您將不會在分支之後對Chart.js所做的任何更改。

來源

2015-06-08 02:59:04 potatopeelings

如何使用下面的代碼添加簡單的選項chartjs正確

回答

相關問題