Chart.js 不显示任何数据

Question

我有一个来自服务器的数据，格式如下：

[
  {
    name: "series1"
    series: [
    {
        date: "2016-01-31T00:00:00.000Z",
        value: 49
      },
      {
        date: "2016-02-28T00:00:00.000Z",
        value: 49
      },
      {
        date: "2016-03-30T00:00:00.000Z",
        value: 44
      },
      {
        date: "2016-04-31T00:00:00.000Z",
        value: 57
      }
    ]
  }
  {
    name: "series2"
    series: [
       ...
    ]
  }
]

上面系列中的每个点代表每月数据

这是我的图表声明：

this.ctx = this.myChartRef.nativeElement.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
          datasets: [{
            label: this.data[0].name,
            fill: false,
            data: [
              this.data[0].series.map((x) => {
                return {
                  x: this.dateTickFormatting(x.date),
                  y: x.value
                }
              })
            ],
          }, {
            label: this.data[1].name,
            fill: false,
            data: [
              this.data[1].series.map((x) => {
                return {
                  x: this.dateTickFormatting(x.date),
                  y: x.value
                }
              })
            ],
          }]
      },
      options: {
          responsive: true,
          title: {
              display: true,
              text: 'My Chart',
              fontSize: 18
          },
          legend: {
              display: true,
              position: "top"
          },
          scales: {
              xAxes: [{
                  type: 'time',
                  time: {
                      unit: 'month',
                      displayFormats: {
                          'month': 'MMM YYYY',
                      },
                      tooltipFormat: "MMM YYYY"
                  }
              }],
          }
      }
    });

function dateTickFormatting returns 这样的字符串：

 return new Date(val).toLocaleString('en-us', { month: 'short', year: 'numeric' });

当我运行时，购物车上方的代码没有显示任何值，我看到的只是空白 canvas 和水平线。

有什么解决办法吗？

Answer 1

您的数据和代码中存在几个问题：

提供的数据不是有效的 JSON 格式（缺少很多逗号）
个人 datasets 中的 data 选项未正确创建
- 不能是嵌套数组而是简单数组
- 不能将 Date 转换为 string，因为您目前使用 dateTickFormatting

Please also note that moment.js needs to be imported if you're not using a bundled build of Chart.js.

以下可运行的代码片段说明了它是如何完成的。

const data = [{
    name: "series1",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 49
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 49
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 44
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 57
        }
    ]
}, {
    name: "series2",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 32
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 28
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 48
        }
    ]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'blue',
              borderColor: 'blue',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'My Chart',
            fontSize: 18
        },
        legend: {
            display: true,
            position: 'top'
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Chart.js 不显示任何数据

Chart.js does not display any data

linechart

chart.js

angular