我有一个带有两个数据集(行)的简单Charts.js折线图。 当我单击其中一个图例标签时,会切换图表中线条的可见性,但仍会显示垂直比例尺。我的问题是如何使垂直比例尺显示并隐藏在线旁边?
var data = {
labels: [1, 2, 3, 4],
datasets: [
{
label: "(Mbps) UP",
fill: false,
yAxisID: "y-axis-upstream",
backgroundColor: "#98B954",
borderColor: "#98B954",
pointBorderColor: "#98B954",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#98B954",
pointHoverBorderColor: "#98B954",
data: [1, 2, 3, 4]
},
{
label: "(Mbps) DOWN",
fill: false,
yAxisID: "y-axis-downstream",
backgroundColor: "#BE4B48",
borderColor: "#BE4B48",
pointBorderColor: "#BE4B48",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#BE4B48",
pointHoverBorderColor: "#BE4B48",
data: [10, 22, 33, 43]
}
]
};
var options = {
title: {
display: true,
text: "Chart Title"
},
legend: {
display: true,
position: "top"
},
scales: {
yAxes: [
{
id: "y-axis-upstream",
type: "linear",
display: true,
position: "left",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(152, 185, 84, 0.4)"
},
ticks: {
display: true,
fontColor: "#98B954"
}
},
{
id: "y-axis-downstream",
type: "linear",
display: true,
position: "right",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(190, 75, 72, 0.2)"
},
ticks: {
display: true,
fontColor: "#BE4B48"
}
}
]
}
};
var ctx = document.getElementById("chartID");
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});