javascript - 我想在 Chart.js 中显示一个折线栏，其中的数据自动从 mockapi 获取

Question

我在chart.js 中处理第二个图表时遇到了困难，我找不到问题的答案...我有一个包含日期和金额的数组。我想将这些值从数组自动放入图表中。我尝试过简单的方法，但它不起作用...... Months 是一个数组，其中包含收到金额的日期， myData 是一个包含捐赠金额的数组。 这就是代码:

let DonationChart2 = new Chart(myChart2, {
    type: 'bar',
    data: {
        labels: [Months],
        datasets: [{
            data: [myData]

        }]
    },
})

月份是可见的，但遗憾的是不是作为单独的标签 - 仅在 1 列中...我希望将它们视为每个金额下的底部描述...仅当我写入 myData[此处为位置时，捐赠金额才可见在数组中]，否则为空....我假设我分配了错误的这些值..也许我应该以某种方式指示将每个值显示为单独的？但我不知道怎么...这是我使用 Chart.js 的第一天...因此出现了这些问题...

Answer 1

使用您的 Months 和 myData 变量，您将它们包装在另一个数组中(变量名称周围的 [])。因此，图表只看到 1 个标签和 1 个数据点，这不是您想要的。

我删除了外部的[]，以便只有您的数组被设置为配置上的标签和数据。

我预计的另一件事是，您将处理长标签名称(例如Mon Dec 17 2018 16:36:04 GMT+0100(中欧标准时间))，这看起来不会在你的图表上很好。

为了解决这个问题，我通过创建一个新的日期对象并使用 toLocaleString 来缩短日期。在上面。我还读到，如果标签表示为数组而不是单个字符串，那么每个部分都将位于新行上。

这就是 .split(",")可以帮助。例如，toLocaleString() 返回字符串“12/20/2018, 12:00:00 PM”，因此 split 函数会在存在逗号并将结果插入数组。生成的数组的索引 0 为 12/20/2018，索引 1 为 12:00:00 PM，因此每个数组都将在图表中独占一行。

const myData = ["60", "80", "5", "100", "60"];
const months = ["Mon Dec 17 2018 16:36:04 GMT+0100 (Central European Standard Time)", "Mon Dec 17 2018 17:36:34 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 09:34:18 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 09:37:16 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 12:41:51 GMT+0100 (Central European Standard Time)"];

let newMonths = months.map(function(date){
  return new Date(date).toLocaleString().split(",");
});

let myChart2 = document.getElementById("myChart2").getContext('2d');
let DonationChart2 = new Chart(myChart2, {
  type: 'bar',
  data: {
    labels: newMonths,
    datasets: [{
      label: 'Amount',
      data: myData
    }]
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<canvas id="myChart2" width="1000" height="900"></canvas>