Chart.js如何提取对象数组的x/y属性用于图表配置？

嘿，我来帮你梳理清楚这个问题！你的代码里现在有两个关键问题，导致Chart.js没法正确解析你的数据：

首先，你写的labels: progress.y完全不对——progress是一个数组，不是单个对象，它根本没有y这个属性，所以这里拿到的是undefined，图表自然显示不了横轴标签。

然后是data: progress，你直接把整个对象数组丢给了dataset的data属性，但Chart.js需要的是数值数组（或者特定格式的点对象），不是完整的对象，所以它没法自动提取你想要的x或y值。

正确的处理方式：用map遍历数组提取属性值 #

假设你的progress数组结构是这样的（应该和你实际的结构匹配）：

const progress = [
  { x: '1月', y: 20 },
  { x: '2月', y: 35 },
  { x: '3月', y: 28 },
  { x: '4月', y: 42 }
];

那修正后的代码应该是这样：

var lineChartData = {
    // 提取每个对象的x属性作为横轴标签
    labels: progress.map(item => item.x),
    datasets: [{
        label: 'My First dataset',
        borderColor: window.chartColors.red,
        backgroundColor: window.chartColors.red,
        fill: false,
        // 提取每个对象的y属性作为折线图的数值数据
        data: progress.map(item => item.y),
        yAxisID: 'y-axis-1'
    }]
};

额外灵活用法 #

如果你想更精准地指定每个数据点的x和y（比如横轴是时间戳这类数值），也可以把data写成点对象数组，这种情况甚至可以不用设置labels：

data: progress.map(item => ({ x: item.x, y: item.y }))

不过这种方式更适合横轴为数值型的场景，你可以根据自己的需求选择。

内容的提问来源于stack exchange，提问作者Bad Dub