如何在chart.js上配置我的y轴？ [英] How can configure my y-axis on chart.js?

问题描述

我正在尝试构建图形。

我的y轴从0开始，我不知道如何配置它，为什么它在说0 - 我看到其他帖子提到scaleOverride：true，scaleStartValue：0.1，scaleStepWidth：5 - 我不知道如何使用它在我的下面的代码，如何配置y轴在chart.js。

My y-axis start with 0 here, I dont know how to configure it and why it is talking 0 - I see other post which mentioned scaleOverride:true, scaleStartValue:0.1, scaleStepWidth:5 - I dont know how to use that in my below code , how can configure y-axis in chart.js.

任何指针

我有以下代码

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);
}); 

推荐答案

谢谢大家的帮助， js将根据你的数据自动为y轴取值，你可以在选项>尺度下改变y / x轴设置，我还需要改变y轴的步长，摆脱x轴网格线， ticks是我正在寻找的东西，这里是我的示例代码和步骤实现所有这些。

Thank you guys for helping, I observed that chart.js will automatically take value for y-axis based on your data, you can change y/x-axis setting under Options > Scales , I also needed to change step size of y-axis and get rid of x-axis grid line,"ticks" is something I was looking for, here is my sample code and steps to achieved all these.

步骤1）Canvas这是你的图表将显示在JSP

Step 1) Canvas this is place holder where your chart will display on JSP

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

步骤2）创建示例数据集（这是JSON，您需要根据您的需求创建，您提供与下面完全相同的格式JSON响应以及您的数据。

Step 2) Create sample datasets (this is JSON you need to create based on your requirement but make sure you provide exact the same formated JSON response as given below along with your data.

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

Step 3) call that JSON which you have created at step 2

  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

Hope this will help , for reference I have used following documentation Chart JS

感谢。

这篇关于如何在chart.js上配置我的y轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！