ChartJS使用多个Y轴

Question

我创建了一个包含两个数据集的折线图，每个数据集都有一个自己的Y尺度和轴，使用Chart.js.my数据集和选项＆＃39;代码如下所示。

datasets: [{ fill:false,
     label: 'Heat', 
     yAxisID: "y-axis-1", 
     data: warm,
      }, 
    { fill:false, 
      yAxisID: "y-axis-0", 
      label:'Mass',  
      data:volume, 
     ]
   options:{
     scales: {
     yAxes: [{ position: "left",
     "id": "y-axis-0", 
     display: true, 
     ticks: { steps: 10, 
     stepValue: 5,
     callback:(label,index,labels)=>{ return label + "%"; } } 
},
 { position: "right", 
    "id": "y-axis-1", 
    display: true, 
    ticks: { steps: 10,
    stepValue: 5,
    callback:(label,index,labels)=>{ return label + " c"; } } }] }
}

此刻看起来像是下面的图像。

当我切换Mass标签时，左侧的YAx仍然出现。如果我切换标签，我想隐藏它。请指导我解决这个问题吗？

Answer 1

您可以使用以下chartjs插件实现此目的......

Chart.plugins.register({
   beforeDraw: function(c) {
      var canvas_id = c.chart.canvas.id;
      if (canvas_id === 'myChart') {
         if (c.data.datasets[0]._meta[0].hidden) {
            c.options.scales.yAxes[1].display = false;
         } else c.options.scales.yAxes[1].display = true;
         if (c.data.datasets[1]._meta[0].hidden) {
            c.options.scales.yAxes[0].display = false;
         } else c.options.scales.yAxes[0].display = true;
      }
   }
});

<强>ᴅᴇᴍᴏ

＆＃13;

＆＃13;

Chart.plugins.register({
   beforeDraw: function(c) {
      var canvas_id = c.chart.canvas.id;
      if (canvas_id === 'myChart') {
         if (c.data.datasets[0]._meta[0].hidden) {
            c.options.scales.yAxes[1].display = false;
         } else c.options.scales.yAxes[1].display = true;
         if (c.data.datasets[1]._meta[0].hidden) {
            c.options.scales.yAxes[0].display = false;
         } else c.options.scales.yAxes[0].display = true;
      }
   }
});

var canvas = document.getElementById('myChart');
var warm = [0, 0, 0, 0, 25, 25, 25, 25, 25, 25];
var volume = [98, 12, 0, 7, 7, 7, 7, 78, 62, 62];
var data = {
   labels: ["23.05.2017 15:34:48", "23.05.2017 15:35:02", "23.05.2017 15:35:14", "23.05.2017 15:35:28", "23.05.2017 15:59:35", "23.05.2017 16:00:11", "23.05.2017 16:07:22", "23.05.2017 16:38:04", "23.05.2017 16:38:43", "23.05.2017 16:57:48"],
   datasets: [{
      fill: false,
      label: 'Heat',
      pointHoverRadius: 5,
      pointHitRadius: 5,
      lineTension: 0,
      yAxisID: "y-axis-1",
      data: warm,
      backgroundColor: "rgba(255,153,0,0.4)"
   }, {
      fill: false,
      pointHoverRadius: 5,
      pointHitRadius: 5,
      lineTension: 0,
      yAxisID: "y-axis-0",
      label: 'Mass',
      data: volume,
      backgroundColor: "rgba(153,255,51,0.4)"
   }]
};
var option = {
   maintainAspectRatio: false,
   responsive: true,
   bezierCurveTension: 0,
   scales: {
      xAxes: [{
         display: true,
         ticks: {
            maxTicksLimit: 3,
            fontSize: 10
         }
      }],
      yAxes: [{
         position: "left",
         "id": "y-axis-0",
         display: true,
         ticks: {
            steps: 10,
            stepValue: 5,
            //max: 100,
            callback: (label, index, labels) => {
               return label + "%";
            }
         }
      }, {
         position: "right",
         "id": "y-axis-1",
         display: true,
         ticks: {
            steps: 10,
            stepValue: 5,
            //max: 100,
            callback: (label, index, labels) => {
               return label + " c";
            }
         }
      }]
   }
};
var myLineChart = Chart.Line(canvas, {
   data: data,
   options: option
});

function adddata() {
   myLineChart.data.datasets[0].data[7] = 50;
   myLineChart.data.labels[7] = "test add";
   myLineChart.update();
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>

＆＃13;

＆＃13;

＆＃13;

^{ChartJS v2.5.0}