如何在chart.js上配置我的y軸？

Question

我正在嘗試構建圖形。

我的y軸在這里以0開頭，我不知道如何配置它以及為什么它在說0 - 我看到其他帖子提到了scaleOverride：true，scaleStartValue：0.1，scaleStepWidth：5 - 我不知道怎么用在我的在代碼下面，如何在chart.js中配置y軸。

任何指針都是

我有以下代碼

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [6, 6, 6, 8, 6, 9, 8]
    }]
};
function barChart() {
    var context = document.getElementById('stacked').getContext('2d');
    var myBar = new Chart(context, {
        type: 'bar',
        data: barChartData,
        options: {
            title:{
                display:true,
                text:"Chart.js Bar Chart - Stacked"
            },
            tooltips: {
                mode: 'label'
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
};
$(document).ready(function() {
    $(document).ready(barChart);
});

Answer 1

謝謝大家幫忙，我觀察到chart.js會根據你的數據自動獲取y軸的值，你可以在Options> Scales下更改y / x軸設置，我還需要改變y軸的步長並且擺脫了x軸網格線，“ticks”是我正在尋找的東西，這是我的示例代碼和實現所有這些的步驟。

步驟1）Canvas這是占位符，您的圖表將顯示在JSP上

<canvas width="1393px;" height="500px;" id="stacked"></canvas>

步驟2）創建樣本數據集（這是您需要根據您的要求創建的JSON，但請確保您提供與下面給出的完全相同的格式化JSON響應以及您的數據。

var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
    label: 'Dataset 1',
    backgroundColor: "red",
    data: [9, 6, 6, 8, 6, 9, 8]
},
{
    label: 'Dataset 1',
        backgroundColor: "rgba(225,226,228,0.5)",
        data: [9, 6, 6, 8, 6, 9, 8]
    }]
};

or you can call JSON from controller inside script as below

var jsonArry = <%=request.getAttribute("jsonArry")%>;

步驟3）調用您在步驟2中創建的JSON

  function barChart(){
          var context = document.getElementById('stacked').getContext('2d');
          var myBar = new Chart(context, {
          type: 'bar',
          data: jsonArry,

  options: {
         tooltips: {
          mode: 'label'
      },
      responsive: true,
      scales: {
          xAxes: [{
              ticks:{
                  stepSize : 10,

              },
              stacked: true,
            gridLines: {
                    lineWidth: 0,
                    color: "rgba(255,255,255,0)"
                }
          }],
          yAxes: [{

              stacked: true,
               ticks: {
                  min: 0,
                  stepSize: 1,
              }

          }]
      }
      }
  });

};

希望這會有所幫助，作為參考，我使用了以下文檔Chart JS

謝謝。

Answer 2

只需刪除stacked選項，它將從0開始停止（除非您的數據從0開始）。

相關小提琴 - http://jsfiddle.net/rsyk9he0/

對於堆疊圖表，Chart.js為每個堆棧（bar）構建正負和的列表，然后使用它來計算出最小值和最大值。 如果沒有負值，則負和列表是0的列表。 這會迫使刻度min為0。

---

scaleStartValue，scaleStepWidth等是Chart.js的v1.x中的選項。 您正在使用v2.x. 有關2.x等效項 ，請參見如何在Chartjs中進行整數比例 。