时间戳

首页 > 解决方案 > Chart.js 不显示任何数据

angular - Chart.js 不显示任何数据

问题描述

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

[
  {
    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' });

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

任何想法如何解决这个问题？

标签： angularchart.jslinechart

解决方案

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

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

另请注意，moment.js如果您不使用 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>

推荐阅读