ChartJS 图表JS使用xAxisKey解析数据

9bfwbjaz 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(166)

我想创建一个图表，x轴为日期和时间，y轴为值。如果数据中的键为“x”，则此方法有效。我的数据中的键为标签“date_time”。我已尝试在分析选项中使用xAxisKey参数指定键的名称，但结果是一个空白图表。
这是我的代码：

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bun>
</head>

<canvas id="myChart"></canvas>

<script>

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>

</body>
</html>

应该如何编写解析代码，以便将数据中的key正确解析为x值？

chart.js

来源：https://stackoverflow.com/questions/74525780/chart-js-parsing-data-with-xaxiskey