我正在尝试使用 Chart.js (v3.4.1) 制作一个简单的折线图。我的数据是一个对象数组，其中每个对象都有 x 和 y 属性，每个属性都是一个整数。例如:[{x: 12, y: 122}]
我的最小概念证明如下:
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"
integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script type="text/javascript">
new Chart('myCanvas', {
type: 'line',
data: {
datasets: [{
data: [
{x: 1, y: 2},
{x: 5, y: 6}
]
}]
}
});
</script>
</html>这是 Chart.JS 自己关于执行此操作的文档:https://www.chartjs.org/docs/latest/general/data-structures.html#object
唉，虽然 y 值受到尊重，但 x 值似乎被完全忽略。将鼠标悬停在某个点上时，该点的标签会显示“0”。
临时解决方法
这会在我嘴里留下酸味，但确实有效:
const myData = [
{x: 1, y: 2},
{x: 5, y: 6}
];
new Chart('myCanvas', {
type: 'line',
data: {
labels: myData.map(row=>row.x),
datasets: [{
data: myData
}]
}
});
最佳答案
感谢 @Etimberg this github issue来寻找答案。
ChartJS 轴可以处于多种“模式”。折线图上，X 轴的默认模式为“类别”。通过手动将其更改为“线性”，您可以按照预期在线绘制点。
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"
integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script type="text/javascript">
new Chart('myCanvas', {
type: 'line',
data: {
datasets: [{
data: [
{x: 1, y: 2},
{x: 5, y: 6}
]
}]
},
options: {
scales: {
x: {
type: 'linear'
}
}
}
});
</script>
</html>关于javascript - 如何使用 {x,y} 对象数组来制作图表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68460411/