我尝试将6个不同的数据集组组合在一起,因此我有一个“-15”数据集、“15”数据集等的切换。x1c 0d1x
以下是我目前掌握的情况:
var labels = [];
for (let index = 0; index < 12; index++) {
labels.push(index);
}
window.onload = function () {
var canvas = document.getElementById('elm-chart'),
ctx = canvas.getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '-15',
data: [
{
x: 0,
y: 10,
},
{
x: 1,
y: 20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 1,
y: 20,
},
{
x: 2,
y: 30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 2,
y: 30,
},
{
x: 3,
y: 35,
},
],
borderColor: 'yellow',
},
{
label: '-15',
data: [
{
x: 6,
y: -10,
},
{
x: 7,
y: -20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 7,
y: -20,
},
{
x: 8,
y: -30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 8,
y: -30,
},
{
x: 9,
y: -35,
},
],
borderColor: 'yellow',
},
],
},
options: {
responsive: true,
scales: {
x: {
type: 'linear',
suggestedMin: labels.reduce((pv, cv) => Math.min(pv, cv)),
suggestedMax: labels.reduce((pv, cv) => Math.max(pv, cv)),
ticks: {
stepSize: 30,
},
},
},
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js" ></script>
<canvas id="elm-chart" width="640" height="480"></canvas>
从我目前为止读到的文档来看,我找不到任何可以直接编辑图例的东西,只能切换隐藏或不隐藏。没有任何关于编辑图例列表的东西
1条答案
按热度按时间iyfjxgzm1#
您可以将自定义legendOnClick处理程序与标签过滤器一起编写: