用xAxisKey绘制JS解析数据图表

Question

我想要在x轴上创建一个日期和时间的图形，在y轴上创建一个值。如果数据以“x”作为数据中的键，则此操作有效。我的数据以标签“date_time”作为关键。我试图在解析选项中使用xAxisKey参数指定键的名称，但结果是一个空白图表。

这是我的密码：

​

var xyValues = [{
    date_time: '2022-11-13 23:00:00',
    value: 2.3
  },
  {
    date_time: '2022-11-14 00:00:00',
    value: 3.1
  },
  {
    date_time: '2022-11-14 01:00:00',
    value: 4.5
  },
  {
    date_time: '2022-11-14 02:00:00',
    value: 5.1
  },
  {
    date_time: '2022-11-14 09:00:00',
    value: 5.5
  }
]

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      data: xyValues
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date_time',
      yAxis: 'value'
    },
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart"></canvas>

​

应该如何对解析进行编码，以便正确地将数据中的键解析为x值？

Answer 1

这是Chart.js V3及以后的一个特性，因此您需要将Charts.js库更新为更新的版本。

那应该是yAxisKey: 'value'而不是yAxis: 'value'

​

var xyValues = [{
    date_time: '2022-11-13 23:00:00',
    value: 2.3
  },
  {
    date_time: '2022-11-14 00:00:00',
    value: 3.1
  },
  {
    date_time: '2022-11-14 01:00:00',
    value: 4.5
  },
  {
    date_time: '2022-11-14 02:00:00',
    value: 5.1
  },
  {
    date_time: '2022-11-14 09:00:00',
    value: 5.5
  }
]

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      data: xyValues
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date_time',
      yAxisKey: 'value'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

​

Answer 2

这是因为您使用的是lib的V2，而这个特性是在v3中添加的，所以您要么需要更新chartjs版本，要么需要用x和y键将数组映射到对象。