Question

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

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

        }]
    },
})

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

Answer 1

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

我卸下了外部[]，以便仅将您的数组设置为配置上的标签和数据。

我期望的另一件事是，您将处理长标签名（例如Mon Dec 17 2018 16:36:04 GMT+0100 (Central European Standard Time)），这在您的图形上看起来不太好。

要解决此问题，我通过创建新的日期obj并在其上使用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>

我想在chart.js中显示一条线，其中的数据是从模仿API自动获取的

1 个答案: