我想使用两个列表中的数据在 Chart.js 中创建一个散点图。第一个列表中的数据应该是 x 值,而第二个列表中的数据应该是 y 值。
我尝试了以下方法,但不起作用。有什么方便的方法可以解决我的问题吗?
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: pvols, # first list
y: prets # second list
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
或者,有人知道如何重新格式化我的数据以适应所需的格式吗?
感谢和亲切的问候
马塞尔
最佳答案
来自docs要使用散点图,数据必须作为包含 X 和 Y 属性的对象传递。
您必须确保您传递的列表采用正确的格式才能被散点图接受,即
var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }];
我会将您的两个列表合并为一个对象,然后将其传递到图表。
let coords = pvols.map( (v,i) => ({ x: v, y: prets[i] }) )
然后在初始化图表时传递它
var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }];
var ctx = document.getElementById("chart");
var scatterChart = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
label: "Scatter Dataset",
data: data
}
],
options: {
scales: {
xAxes: [
{
type: "linear",
position: "bottom"
}
]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="chart" height="450" width="600"></canvas>
关于javascript - 如何使用两个列表中的数据创建 Chart.js 散点图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47244939/