如何在多线图中随线条打开和关闭数据点

// 创建多线图对象
var chart = new Chart({
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Line 1',
        data: [10, 20, 30, 40, 50, 60],
        borderColor: 'red',
        fill: false
      },
      {
        label: 'Line 2',
        data: [5, 15, 25, 35, 45, 55],
        borderColor: 'blue',
        fill: false
      },
      // 添加其他线条...
    ]
  },
  options: {
    // 设置图表的其他属性...
  }
});

// 创建开关按钮
var toggleButton1 = document.createElement('button');
toggleButton1.textContent = 'Toggle Line 1';
var toggleButton2 = document.createElement('button');
toggleButton2.textContent = 'Toggle Line 2';

// 添加按钮点击事件处理函数
toggleButton1.addEventListener('click', function() {
  var dataset = chart.data.datasets[0];
  dataset.hidden = !dataset.hidden; // 切换数据点的显示和隐藏状态
  chart.update(); // 更新图表
});

toggleButton2.addEventListener('click', function() {
  var dataset = chart.data.datasets[1];
  dataset.hidden = !dataset.hidden; // 切换数据点的显示和隐藏状态
  chart.update(); // 更新图表
});

// 将按钮添加到页面中
document.body.appendChild(toggleButton1);
document.body.appendChild(toggleButton2);