Question

我试图让我的图表 NOT 从0开始。我有这种语法，完美无缺 - ＆gt;

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
这是我console.log()数据的JSON (13) ["Hornsby", 0, 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 99] 0:"Hornsby" 1:0 2:0 3:100 4:200 5:300 6:400 7:500 8:600 9:700 10:800 11:900 12:99 length:13

编辑4
我正在查询MSSQL并将结果存储在一个数组中 - 然后将数组传递给JSON以供JQuery解析。以下是完整语法（不包括DB conenction＆amp; query info）

<?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中的代码也可能略有变化。假设您的数据如下所示：

[ “斯坦利”，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],

Chart.JS从0开始

1 个答案: