切换分组图例元素时，ChartJS绘图未显示为应有的状态

Question

我有一个ChartJS，它绘制了多个折线图和置信区间区域。问题是，第一个带有CI的分组折线图有缺陷，所以当我切换它时，其他组的区域也被隐藏了。这很难用语言解释，所以我把它录下来，放在youtube上。

到目前为止，我的代码是这样的：

let predictData = [21,22,23,24,25,26,27,28];
let lowerCI80 = [20,21,22,23,24,25,26,27];
let upperCI80 = [22,23,24,25,26,27,28,29];
let lowerCI90 = [18,19,20,21,22,23,24,25];
let upperCI90 = [23,24,25,26,27,28,29,30];
const data = {
labels: [1,2,3,4,5,6,7,8],
datasets: [
{
label: "Lower_80%CI",
type: "line",
backgroundColor: "rgb(75, 192, 255, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: 0,
tension: 0,
data: low80Data,
yAxisID: "y",
xAxisID: "x",
},
{
label: "80% CI",
type: "line",
backgroundColor: "rgb(75, 192, 255)",
borderColor: "rgb(75, 192, 255)",
hoverBorderColor: "rgb(75, 192, 255)",
pointRadius: 0,
fill: false,
tension: 0,
data: predictData,
yAxisID: "y",
xAxisID: "x",
},
{
label: "Upper_80%CI",
type: "line",
backgroundColor: "rgb(75, 192, 255, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: 0,
tension: 0,
data: up80Data,
yAxisID: "y",
xAxisID: "x",
},
{
label: "Lower_90%CI",
type: "line",
backgroundColor: "rgb(255, 75, 75, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: 0,
tension: 0,
data: low90Data,
yAxisID: "y",
xAxisID: "x",
},
{
label: "90% CI",
type: "line",
backgroundColor: "rgb(255, 75, 75)",
borderColor: "rgb(255, 75, 75)",
hoverBorderColor: "rgb(255, 75, 75)",
pointRadius: 0,
fill: false,
tension: 0,
data: predictData,
yAxisID: "y",
xAxisID: "x",
},
{
label: "Upper_90%CI",
type: "line",
backgroundColor: "rgb(255, 75, 75, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: 0,
tension: 0,
data: up90Data,
yAxisID: "y",
xAxisID: "x",
},
],
};

const options = {
plugins: {
title: {
display: false,
},
legend: {
display: true,
position: "top",
labels: {
filter: function (item, chart) {
return !item.text.includes("_");
},
},
onClick: function (e, legendItem) {
// need to hide index -1 and index +1
var index = legendItem.datasetIndex;
var ci = this.chart;
var alreadyHidden =
ci.getDatasetMeta(index).hidden === null
? false
: ci.getDatasetMeta(index).hidden;
var meta_lo = ci.getDatasetMeta(index - 1);
var meta = ci.getDatasetMeta(index);
var meta_hi = ci.getDatasetMeta(index + 1);
if (!alreadyHidden) {
meta_lo.hidden = true;
meta.hidden = true;
meta_hi.hidden = true;
} else {
meta_lo.hidden = null;
meta.hidden = null;
meta_hi.hidden = null;
}
ci.update();
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
hover: {
mode: "nearest",
intersect: false,
},
scales: {
xAxes: [
{
ticks: {
stepSize: 7, // This is not working as well(?)
fontColor: "white",
},
},
],
},
};

return <Line data={data} options={options} />

Answer 1

因为您试图通过指定数据集索引来填充特定的数据集，所以它不起作用。这不起作用，因为数据集是隐藏的，所以不再填充。因此，您要么需要指定正确的数据集，要么对数据集使用相对填充。更多信息可以在这里找到。

您的步长不起作用的原因是您的磅秤配置在V2中，而在V3中，磅秤的配置方式发生了变化。默认情况下，x轴是一个没有stepSize属性的类别轴。

对于V2和V3之间的所有更改，您可以阅读迁移指南

let predictData = [21, 22, 23, 24, 25, 26, 27, 28];
let low80Data = [20, 21, 22, 23, 24, 25, 26, 27];
let up80Data = [22, 23, 24, 25, 26, 27, 28, 29];
let low90Data = [18, 19, 20, 21, 22, 23, 24, 25];
let up90Data = [23, 24, 25, 26, 27, 28, 29, 30];
const data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [{
label: "Lower_80%CI",
backgroundColor: "rgb(75, 192, 255, 0.3)",
borderColor: "transparent",
pointRadius: 0,
data: low80Data,
},
{
label: "80% CI",
backgroundColor: "rgb(75, 192, 255)",
borderColor: "rgb(75, 192, 255)",
hoverBorderColor: "rgb(75, 192, 255)",
pointRadius: 0,
data: predictData,
},
{
label: "Upper_80%CI",
backgroundColor: "rgb(75, 192, 255, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: '-2',
data: up80Data,
},
{
label: "Lower_90%CI",
backgroundColor: "rgb(255, 75, 75, 0.3)",
borderColor: "transparent",
pointRadius: 0,
fill: '+2',
data: low90Data,
},
{
label: "90% CI",
backgroundColor: "rgb(255, 75, 75)",
borderColor: "rgb(255, 75, 75)",
hoverBorderColor: "rgb(255, 75, 75)",
pointRadius: 0,
data: predictData,
},
{
label: "Upper_90%CI",
backgroundColor: "rgb(255, 75, 75, 0.3)",
borderColor: "transparent",
pointRadius: 0,
data: up90Data,
},
],
};
const options = {
plugins: {
title: {
display: false,
},
legend: {
display: true,
position: "top",
labels: {
filter: function(item, chart) {
return !item.text.includes("_");
},
},
onClick: function(e, legendItem) {
// need to hide index -1 and index +1
var index = legendItem.datasetIndex;
var ci = this.chart;
var alreadyHidden =
ci.getDatasetMeta(index).hidden === null ?
false :
ci.getDatasetMeta(index).hidden;
var meta_lo = ci.getDatasetMeta(index - 1);
var meta = ci.getDatasetMeta(index);
var meta_hi = ci.getDatasetMeta(index + 1);
if (!alreadyHidden) {
meta_lo.hidden = true;
meta.hidden = true;
meta_hi.hidden = true;
} else {
meta_lo.hidden = null;
meta.hidden = null;
meta_hi.hidden = null;
}
ci.update();
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
hover: {
mode: "nearest",
intersect: false,
},
scales: {
x: {
type: 'linear',
ticks: {
stepSize: 7, // This is not working as well(?)
color: "white",
},
},
},
};
new Chart('chartJSContainer', {
type: 'line',
data: data,
options: options
})

<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>