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"
                  }
              }],
          }
      }
    });

函数dateTickFormatting返回这样的字符串：

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

当我在购物车上方运行代码时未显示任何值，我看到的只是带有水平线的空白画布。

任何想法如何解决？

Answer 1

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

1. 提供的数据不是有效的JSON格式（缺少很多逗号）
2. 单个data内部的datasets选项未正确创建
   • 它不能是嵌套数组，而应该是一个简单数组
   • Date不能像您当前使用string那样转换为dateTickFormatting

请注意，如果您没有使用捆绑的Chart.js版本，则需要导入moment.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>