隐藏数据时完全隐藏chartjs上的Y轴

zbq4xfa0 于 2024-01-07 发布在 Chart.js

关注(0)|答案(2)|浏览(150)

当数据从图表中隐藏时，如何隐藏/删除chartjs上的y轴？如果用户通过点击图例隐藏所有数据集，y轴仍然存在，我想知道如果所有数据集都隐藏了，如何完全隐藏它。这是chartjs代码。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000, 1510001443000, 1510001477000, 1510001555000, 1510001587000, 1510001621000, 1510001652000, 1510001680000, 1510001700000, 1510001712000, 1510001744000, 1510001756000, 1510001762000, 1510001768000, 1510001796000, 1510001805000, 1510001860000, 1510001888000, 1510001916000, 1510001952000, 1510001956000, 1510001984000, 1510002006000, 1510002016000, 1510002073000, 1510002185000, 1510002213000, 1510002253000, 1510002259000, 1510002283000, 1510002317000, 1510002325000, 1510002393000, 1510002494000, 1510002510000, 1510002554000, 1510002572000, 1510002588000, 1510002618000, 1510002634000, 1510002648000, 1510002658000, 1510002678000, 1510002694000, 1510002702000, 1510002722000, 1510002732000, 1510002782000, 1510002800000, 1510002808000, 1510002814000, 1510002830000, 1510002884000, 1510002947000, 1510002953000, 1510002979000, 1510002995000, 1510003039000, 1510003067000, 1510003097000, 1510003117000, 1510003127000, 1510003151000],
        datasets: [
          {
            label: 'dataset 1',
            fill: false,
            backgroundColor: 'rgb(255, 99, 132)',
            data: [72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72]
          },
          {
            label: 'dataset 2',
            fill: false,
            backgroundColor: 'rgb(54, 162, 235)',
            data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
          }
        ]
    },
    options: {
      responsive: true      
    }
});

.myChartDiv {
  width: 600px;
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="800"></canvas>
    </div>
  </body>
</html>

chart.js

来源：https://stackoverflow.com/questions/50515449/completely-hide-the-y-axis-on-chartjs-when-data-is-hidden

2条答案

按热度按时间

7ajki6be1#

有点晚了，但希望能帮助到别人：

datasets: [
      {
        yAxisID: 'TOGGLE_yaxis1',
        label: 'dataset 1',
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        data: [72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72]
      },
      {
        yAxisID: 'yaxis2',
        label: 'dataset 2',
        fill: false,
        backgroundColor: 'rgb(54, 162, 235)',
        data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
      }
    ]

options:
{
    responsive: true,
    legend:{
        display: true,
        onClick: function(event, legendItem) {
           var y_axis_id = MYCHART.data.datasets[legendItem.datasetIndex].yAxisID;
          if(y_axis_id.startsWith('TOGGLE')){
            //find by name yaxis                     
            for(i=0;i<MYCHART.options.scales.yAxes.length;i++){
              if(MYCHART.options.scales.yAxes[i].id==y_axis_id){
                 MYCHART.options.scales.yAxes[i].display = !MYCHART.options.scales.yAxes[i].display;
                 MYCHART.data.datasets[legendItem.datasetIndex].hidden = !MYCHART.data.datasets[legendItem.datasetIndex].hidden; 
                 MYCHART.update();
              }
            }
        }
    },
scales: {
    yAxes: [{
      id: 'TOGGLE_yaxis1'
     },{
      id: 'yaxis2'
     }]}
},

字符串

赞(0）回复(0）举报 2024-01-07

a1o7rhls2#

在4.0版本中，你需要做一些改变：

options: {
    plugins:
    {
        legend: {
            display: true,
            onClick: function (event, legendItem) {
                var y_axis_id = event.chart.data.datasets[legendItem.datasetIndex].yAxisID;
                var scaleAxis = event.chart.options.scales[y_axis_id];
                scaleAxis.display = !scaleAxis.display;
                event.chart.data.datasets[legendItem.datasetIndex].hidden = !event.chart.data.datasets[legendItem.datasetIndex].hidden;
                event.chart.update();
            }
        }
    };

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

隐藏数据时完全隐藏chartjs上的Y轴

2条答案

相关问题

热门标签

最新问答