bar*_*ich 3 javascript chart.js
我想要做的是根据label属性更改此图表上一条线的 Z 顺序。例如，在这里我想在顶部绘制“Label2”图。我试图做的是改变 data_all 数组，将我想要的元素放在列表中的第一个位置，尽管我无法完成这项工作。如何更改剧情顺序？
所以我正在创建一个对象数组，我可以将它们直接放入图表js的“数据部分”中，如下所示
data_all=[]
var s1 = {
label: 'Label1',
borderColor: '#00ffff',
fill: false,
data: [
{x: '2021-06-25 11:00:00', y:50.5401942},
{x: '2021-06-25 12:00:00', y:49.9631549},
{x: '2021-06-25 13:00:00', y:50.0555899}]
data_all.push(s1)
var s2 = {
label: 'Label2',
borderColor: '#00ffff',
fill: false,
data: [
{x: '2021-06-25 11:00:00', y:50.5401942},
{x: '2021-06-25 12:00:00', y:49.9631549},
{x: '2021-06-25 13:00:00', y:50.0555899}]
data_all.push(s2)
data_all然后我通过传递到图表变量来创建图表。
var ctx = document.getElementById('plotAll').getContext('2d');
var plotall = new Chart(ctx, {
type: 'line',
data: { datasets: data_all },
options: {
responsive: true,
zoom: {
enabled: true,
mode: 'x'
},
pan: {
enabled: true,
mode: 'xy'
},
scales: {
xAxes: [{
type: 'time'
}]
},
}
});
您可以利用order数据集中的属性，该属性越低，绘制该数据集的速度就越快，请参见示例，通常红线会与蓝线重叠，现在它相反：
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
order: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'blue',
order: 0
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>