在chart.js中组合多个图例元素

Question

我正在尝试向chart.js中的时间序列图添加置信区间。目前，我绘制了三个数据集并使用fill选项。这意味着我在图例中得到了3个元素，所有这些元素都可以独立切换（图1）。

我想要做的是将三个图例元素组合到一个对象中，该对象将立即切换所有三个数据集。[[eg就像图2中的模型一样。[或以其他方式构造数据单个数据集绘制所有三条线]。

EDIT：这是我目前如何执行情节的示例的最小工作-https://jsfiddle.net/r491ge8z/7/

在此示例中，我希望使用一个图例元素来切换所有三个数据集。

var chartData = {
labels: [1, 2, 3, 4, 5],
datasets: [
        {
      label: "Set 1",
      backgroundColor: 'rgba(55, 173, 221,  0.6)',
      data: [8, 18, 48, 38, 28],
      borderWidth: 0.1,
      fill: false,
      pointRadius: 0.0,
  },

  {
      label: "Set 1",
      backgroundColor: 'rgba(55, 173, 221,  1)',
      data: [10, 20, 50, 40, 30],
      borderColor: "#00F",
      fill: false,
      pointRadius: 0.0,
  },

  {
      label: "Set 1",
      backgroundColor: 'rgba(55, 173, 221,  0.6)',
      data: [12, 22, 52, 42, 32],
      borderWidth: 0.1,
      fill: '-2',
      pointRadius: 0.0,
  },

]
};

var chartOptions = {
responsive: true,
title: {
    display: true,
    text: 'Bad Confidence Intervals'
},
};

var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});

Answer 1

我通过将以下内容添加到图表选项中来确定如何执行此操作-[假设您的置信区间分别命名为xxx_lo，xxx，xxx_hi，并依次显示在chartData中]

jsfiddle示例-https://jsfiddle.net/5fktnv6a/

labels: {
  filter: function(item, chart) {
    return !item.text.includes('_');
  }
},
onClick: function(e, legendItem) { // need to hide index -1 and index +1
  let index = legendItem.datasetIndex;
  let ci = this.chart;
  let alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;
  let meta_lo = ci.getDatasetMeta(index - 1);
  let meta = ci.getDatasetMeta(index);
  let 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();
},