Chart.js不显示任何数据 [英] Chart.js does not display any data

问题描述

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

I have a data coming from the server in the following format:

[
  {
    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: [
       ...
    ]
  }
]

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

Every point in the series above represent monthly data

这是我的图表声明:

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 返回这样的字符串:

function dateTickFormatting returns string like that:

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

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

When I am running the code above the cart does not show any values, what I see is only blank canvas with horizontal lines.

有什么办法解决这个问题吗?

Any ideas how to fix that?

推荐答案

数据和代码中存在几个问题:

There are several problems in your data and in your code:

1. 提供的数据不是有效的JSON格式(缺少很多逗号)
2. 单个数据集中的 data 选项未正确创建
   • 它不得为嵌套数组，而应为简单数组
   • 不得像您当前使用 dateTickFormatting
   那样将 Date 转换为 string

1. The provided data is not of valid JSON format (lots of commas missing)
2. The data option inside individual datasets is not correctly created
   • It must not be a nested array but a simple array
   • The Date must not be converted to string as you currently do using dateTickFormatting

请注意，如果您未使用捆绑的Chart.js版本，则需要导入 moment.js .

以下可运行的代码段说明了如何实现.

The following runnable code snippet illustrates how it can be done.

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不显示任何数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！