时间戳

首页 > 解决方案 > Chart.js 时间序列显示空图

javascript - Chart.js 时间序列显示空图

问题描述

这是我用来显示图表的代码

<canvas id="myChart"></canvas>
    <script>
    var data1 = [{
        x: new Date("2020-01-01 18:00:00"),
        y: 1
    }, {
        x: new Date("2020-01-02 18:00:00"),
        y: 2
    },{
        x: new Date("2020-01-03 18:00:00"),
        y: 3
  }];
    var ctx = document.getElementById('myChart');
    console.log(data1);
    var chart = new Chart(ctx, {
        type: 'line',
        data: data1,
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                    distribution: 'linear',
                }]
            }
        }
    });


    </script>

我尝试从他们的网站粘贴一个典型的 chart.js 示例，并且图表显示得很好。我也尝试过在 x 轴上使用字符串，但这似乎也不起作用

无法弄清楚为什么会这样，任何帮助将不胜感激。

标签： javascriptchart.js

解决方案

正如palaѕн评论的那样，您没有正确检索 2D 上下文。这应该如下所示。

var ctx = document.getElementById('myChart').getContext('2d');

此外，需要以不同的方式定义数据对象。

data: {
  datasets: [{
    data: data1
  }]
},

请在下面查看您修改后的代码。

var data1 = [{
  x: new Date("2020-01-01 18:00:00"),
  y: 1
}, {
  x: new Date("2020-01-02 18:00:00"),
  y: 2
}, {
  x: new Date("2020-01-03 18:00:00"),
  y: 3
}];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',  
  data: {
    datasets: [{
      data: data1
    }]
  },
  data1,
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        },
        distribution: 'linear',
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>

推荐阅读