旧的 yAxis 刻度不会被删除（chartjs、react-chartjs-2 包装器）

Question

当我绘制一个包含 4 条线的图表时，每条线都有自己的数据 ofc，我以编程方式为具有 4 个 Y 轴的折线图创建选项，第一个在左侧，其余在右侧。现在，绘制图表后，我从列表中删除 select 一些数据源（绘制的线条更少），现在过时的 yAxis 刻度保留在那里，即使图表正确地仅绘制了 select ed 行，选项也会正确更新。我想不出删除它们的方法！

我用谷歌搜索了 2 天，但找不到解决方案。我正在使用函数式风格的 React，这让事情变得更加复杂，因为每条建议似乎都是经典风格。如果有帮助的话，我也在使用 react-chartjs-2 包装器。我对反应也很陌生，并在 Whosebug 中询问，所以请让我松懈 :) 我假设图表正在重新渲染或其他原因，因为行数等确实发生了变化。

在图像中，console.log 中显示的“createYaxis”是生成的 yAxes- 选项对象的一部分（否则它是功能性的）。问题 y 轴位于红色和黄色的右侧。图片显示前后情况。

img 下面的代码生成的选项对象的图像：

    var yAxisItems = [];
  function createYaxises (num){
    var arr = [];
for (var i=0;i<num.length;i++){
  
  if (i===0){
    arr.push({
 
          display: true,
          id: i,
          type: 'linear',
          position: 'left',
          gridLines: {
            display:false,
            
            //color: 'blue'
        },
        ticks: {
         fontColor: lineColourArray[i],
         fontSize: 14,
     }
           })
          }
        else {
          arr.push({
 
            display: true,
            id: i,
            type: 'linear',
            position: 'right',
            gridLines: {
              display:false,
              
              //color: 'blue'
          },
          ticks: {
            display:true,
           fontColor: lineColourArray[i],
           fontSize: 14,
       }
      })
        }}
        yAxisItems = arr;
        console.log("createyaxis arr: " , arr);
        console.log("createyaxis: " , yAxisItems); //JSON.stringify(yAxisItems));
}

 //get data for selected sensors and set it to chart data 
  const handleGetSelectedSensorData = function () {
    
    var d = getSelectedSensorData();
 console.log("d: ", d);
    var dSets = [];
    if (d[0]){
      d.map((dItem,index)=> {
       var newDsetData =[];
       if (dItem.data){
          dItem.data.map((innerDataItem)=> {
            var dSet = {};
            dSet.x =  innerDataItem.timestamp;
            dSet.y = innerDataItem.v;
            newDsetData.push(dSet);
          })
        
        var newset = {
          data: newDsetData,
          label: dItem.sensorTag,
          borderColor: lineColourArray[index],
          fill: false,
          pointRadius: 1.5,
          backgroundColor:lineColourArray[index],
          borderWidth: 2,
          showLine: true,
          pointHoverRadius: 5,
          lineTension: 1,
 
        };
         
          dSets.push(newset);
      }}) 
 
      var dDataTemp = {};
      var optionsTemp = new Object();
 
    dDataTemp.datasets =dSets;
    //create yaxises only once
   
 
    createYaxises(dDataTemp.datasets);
       //more than one set (TODO)
       //console.log("dDataTemp.datasets : ", dDataTemp.datasets)
        if (dDataTemp.datasets.length >1){
          console.log("dset > 1");
         
         for(var i=0;i< dDataTemp.datasets.length;i++) {
          dDataTemp.datasets[i].yAxisID = i;
            console.log("setting options");
      
            optionsTemp ={
              tooltips: {
                enabled: true, 
                intersect:false,
                mode:'x',
                  
              callbacks: {
                title: function(tooltipItem, data) {
                  var toSplit = tooltipItem[0].label.split(",");
                  return (toSplit[0]);
                },
                label: function (tooltipItem) {
                  var split = tooltipItem.xLabel.split(',');
                    //return ( Number(tooltipItem.yLabel).toFixed(3));
                    return (split[2] + " : " + Number(tooltipItem.yLabel).toFixed(3)); 
                }
              },
              },
              hover: {
                mode: 'nearest',
                intersect: true,
              },
     
                title:{
                  display:true,
                  text:'Valittu sensoridata',
                  fontSize:20
                      },
                  legend:{
                    display:true,
                    position:'right'
                  },
                  scales: {
                     xAxes: [{
                      display: true,
                      type: 'time',

                      ticks: {
                      }
                    }],
                       yAxes: 
                        yAxisItems
                    }
        }
          }
      setOptions(optionsTemp);
      console.log("options: " , optionsTemp);
      setdData(dDataTemp);
}}


    else {
      console.log("error in handleGetSelectedSensorData()");
    }
  }

并且这条线是这样添加的：

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

Answer 1

而不是设置 display: true 设置 display: 'auto'，这将使轴消失，只要没有链接到该比例尺的可见数据集，一旦数据集变得可见，即链接到该比例，它将再次显示比例。

文档：https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-axes

旧的 yAxis 刻度不会被删除（chartjs、react-chartjs-2 包装器）

old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)

javascript

chart.js

react-chartjs-2