javascript - Chart.JS 不从 0 开始

Question

我试图让我的图表不从 0 开始。我有这个语法，它工作得很好 ->

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Title'
        }
    }
})

但是，当我尝试添加下面的 - beginAtZero 时，页面将不再显示我的图表。

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false
                }
            }]
        },
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Title'
        }
    }
});

使用 Chart.JS 添加从 0 开始的 false 的正确方法是什么

编辑
根据下面的评论，我添加了缺少的逗号，但图表仍然从 0 开始？

编辑2
在下面添加了我的数据的图像。我希望 xAxes 不从 0 开始，并且希望将 yAxes 格式化为带有 $ 符号和逗号(如果可能)的货币

这是我的图表的屏幕截图

编辑3
这是我的 JSON 数据的 console.log()(13) ["霍恩斯比", 0, 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 99]
0:“霍恩斯比”
1:0
2:0
3:100
4:200
5:300
6:400
7:500
8:600
9:700
10:800
11:900
12:99
长度:13

编辑4
我正在查询 MSSQL 并将结果存储在一个数组中 - 然后将数组传递给 JSON 以供 JQuery 解析。以下是完整语法(不包括数据库连接和查询信息)

<?php
$db->setQuery($sql);
$rows = $db->loadRowList();
$output = array();
foreach( $rows as $row ) {
array_push($output, $row);
} 
$data = json_encode($output[0]);?>

`<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>

<script>
var jsondata = <?php echo $data; ?>;
var values = [];
for (var i in jsondata) {
values.push(jsondata[i]);
}
var labelsarr = Object.keys(jsondata);
var barChartData = {
labels: labelsarr,
datasets: [{
label: 'Dollar Amount',
backgroundColor:'rgba(200, 200, 200, 0.75)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
data: values
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample Data'
}
}
});
</script>
</body>
</html>`

Answer 1

我无法重现该问题。

只要您有此设置 beginAtZero: false，它就可以工作 - 不过，这适用于 yAxis。

您似乎正在寻找处理返回的数组。我只需修改类似于下面演示的图表。

请参阅下面的演示

window.onload = function() {
  var barChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: 'Hornsby',
      backgroundColor: '#ff0000',
      borderColor: '#ff9900',
      borderWidth: 1,
      data: [0, 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 99]
    }]
  };

  var ctx = document.getElementById("canvas").getContext("2d");


  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
      responsive: true,
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: false,
            suggestedMin: 3
          }
        }]
      },
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Title'
      }
    }
  });
};

#canvas {
  width: 500px;
  height: 300px;
  border: 1px solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="canvas"></canvas>

更新

您的 PHP/JS 代码也可能会略有变化。假设您的数据如下所示:

["Stanley",0,0,10,20,30,50000,400000,70000,700,800,900,1111]

然后你可以进行这些更改(注意:我还没有测试过它们)

var jsondata = <?php echo $data; ?>;
var values = [];

// Iterate through loop starting at position 1 
// (position zero has a name, not a value)
for (var i=1; i<jsondata.length; i++) {
    values.push(jsondata[i]);  // we end up with 12 values
}

// this could be hard-coded
var labelsarr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 ...
// label could be coming from the data set
// the first element in the array has a label, let's use it
label: jsondata[0],