Chart.js如何遍历JSON的close字段填充到股票折线图dataset中

1. 预处理股价JSON数据 #

首先需要从原始的股价JSON数组中，分别提取折线图X轴需要的日期标签，以及数据集需要的收盘价序列：

// 假设你拿到的原始历史股价JSON数组存储在变量 stockPriceData 中
const dateLabels = stockPriceData.map(item => item.date);
const closePriceList = stockPriceData.map(item => item.close);

2. 替换Chart.js配置中的对应字段 #

修改现有的Chart.js初始化代码，替换示例数据即可，同时优化折线图适配配置（原示例是柱状图的多色配置，折线图不需要多色，且股价不需要堆叠展示）：

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dateLabels, // 替换为提取的日期标签
        datasets: [{
            label: `${stockPriceData[0].symbol} 收盘价`, // 替换为对应股票代码的标注
            data: closePriceList, // 替换为提取的收盘价序列
            backgroundColor: 'rgba(54, 162, 235, 0.2)', // 单条折线统一填充色
            borderColor: 'rgba(54, 162, 235, 1)', // 单条折线统一边框色
            borderWidth: 1,
            tension: 0.1 // 可选参数，可让折线更平滑
        }]
    },
    options: {
        scales: {
            y: {
                stacked: false // 股价不需要堆叠展示，关闭原示例的堆叠配置
            }
        }
    }
});
</script>

补充说明 #

如果你的股价数据是通过接口异步请求获取的，需要等接口返回数据后再执行上述代码；如果是已经初始化过图表需要更新数据，可以直接修改图表实例属性后调用更新方法：

// 已有图表实例时更新数据的写法
myChart.data.labels = dateLabels;
myChart.data.datasets[0].data = closePriceList;
myChart.update();

内容的提问来源于stack exchange，提问作者Lia Honey