javascript - 图表Js + 数组

Question

我正在尝试使用一个使用 Chart.js 的解决方案，但它不接受我的标签和 dataset.label 参数值。

对于标签参数，我捕获数组中的值，然后将数组传递给参数，请查看代码，以便您可以看到我在做什么:

chartX.map(function (item) {
   return '"' + item + '"';
}).join(", ");

yAxis = chartY.join(', ');

console.log(chartX); // <--- ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: chartX,
    datasets: [{
      label: 'Försäjlning',
      data: yAxis
    }]
}

chartX 是一个数组，它在 map 内格式化。您可以在 console.log(chartX) 中看到结果。对于 ChartY 数组，我只需用“,”将其连接起来，并将其保存在 yAxis 变量中。当我执行 console.log 时，这个也给了我预期的值。

问题是图表 js 似乎不喜欢数组，因为没有显示任何内容，甚至没有显示错误消息。

有人遇到过类似的问题吗？ 可能出了什么问题？

非常感谢!!!

Answer 1

试试这个 这是你的 html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="200" height="100"></canvas>

这是你的js

var arr=["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
        // The data for our dataset
        data: {
            labels:arr,
            datasets: [{
                label: "My First dataset",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45, 5, 2, 20, 30, 45],
            }]
        },

        // Configuration options go here
        options: {}
    });