js和我有两个数据集。
data1 = [[0,1],[2,3],[5,7]]和data2 = [[1,4],[2,6],[5,2],[7,1]]。每个数据列表都包含了代表点的列表,这些点要绘制在一个 一样 图表:(x和y值)。(x和y值)
我想完全像这样的情节 。https:/www.chartjs.orgsampleslatestchartslinemulti-axis.html
但是如你所见,我的数据列表的x或y值不一样,甚至大小也不一样,所以我不能使用正则。
data: {labels = [1,2,3,4,5],
data = [7,8,3,1,2],
data = [9,1,2,3,4]} //for example
我怎样才能用javascript来编写这个图表(请不要用jQuery)?我没有在互联网上找到任何可能帮助的东西.任何建议对我来说都很重要!
您可以使用 散点图,接受 data
作为一个包含 x
和 y
属性。要把它变成线图,请定义 showLine: true
里面 data
配置对象。
给定你的数据结构,下面这行代码会产生Chart.js所期望的数据结构。
data1.map(o => ({ x: o[0], y: o[1] }))
请看一下下面的可运行代码片段。
const data1 = [[0,1],[2,3],[5,7]];
const data2 = [[1,4],[2,6],[5,2],[7,1]];
new Chart('line-chart', {
type: "scatter",
responsive: true,
data: {
datasets: [
{
data: data1.map(o => ({ x: o[0], y: o[1] })),
label: 'Dataset 1',
showLine: true,
fill: false,
borderColor: 'red'
},
{
data: data2.map(o => ({ x: o[0], y: o[1] })),
label: 'Dataset 2',
showLine: true,
fill: false,
borderColor: 'blue'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>