如何通过相同的标签管理线、散点图？

Question

我是 react-chartjs 2 的新手

这是我的阴谋。 有相同的标签，例如 FACTOR5 FACTOR5 FACTOR6 FACTOR6 ...

我想做的是同时打开/关闭情节。 当我禁用 FACTOR5 时，点和线将被禁用。 但现在我必须互相点击。

我该怎么办？ 这是我的代码。

function createChart4() {

    let result = Object.assign([], resultScatter);
    let result2 = Object.assign([], resultData);
    let columns = Object.keys(resultScatter[0]).filter(el => el !== "Y");
    const colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#17becf"
                    "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"];
    let x=[];
    for (let i=0; i<columns.length; i++){
          x[i] = result.map((data) => data[columns[i]]);
        }
    let y = result.map((data) => data.Y);
    let scatterData = {
        datasets:[],
      };
    for (let i = 0; i < columns.length; i++) {
      let color = colors[i];
      let label = columns[i];
      let lines = result2.filter(el => el.FACTOR_CD === transLangKey(columns[i]))[0];
      let minX = Math.min(...x[i]);
      let maxX = Math.max(...x[i]);
    
      scatterData.datasets.push({
        label: label,
        data: x[i].map((val, index) => ({x: val, y: y[index]})),
        backgroundColor: color,
        borderColor: color,
        hidden: i !== 0,
        showLine: false,
        },
        {
        label: label,
        showLine: true,
        data: [{x: minX, y: lines.REG_COEF * minX + lines.CONSTANT},
               {x: maxX*1.05, y: lines.REG_COEF * maxX*1.05 + lines.CONSTANT},
               ],
        backgroundColor: color,
        borderColor: color,
        hidden: i !== 0,
        });
      }
      setChart4Data(scatterData);
    }

当我点击一个标签时，点和线同时被禁用或可视化。

Answer 1

setChartPlugin({
    title: {
      display: false
    },
    legend: {
      labels: {
        filter: function(legendItem, chartData) {
          if (legendItem.datasetIndex === 0) {
            return true;
          }
          return false;
        }
      },
      onClick: function(e, legendItem, legend){
         const index = legendItem.datasetIndex;
         const ci = legend.chart;
         if (ci.isDatasetVisible(index)) {
           ci.hide(index);
           ci.hide(index+1);
           legendItem.hidden = true;
         } else {
           ci.show(index);
           ci.show(index+1);
           legendItem.hidden = false;
         }
      }
    },
  }); 

在图表插件中添加此代码块。它有效。