複数のY軸を使用するChartJS

Question

Chart.js.myデータセットとオプションのコードを使用して、それぞれ独自のYスケール&軸の2つのデータセットを持つ折れ線グラフを作成しました。

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"; } } }] } 
} 

現在のところ、次の画像のようになります。

私は質量ラベルを切り替えると、左のYAxesが表示されます。ラベルを切り替えると隠したいです。この問題を解決するにはどうすればいいですか？

Answer 1

あなたが

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; 
     } 
    } 
}); 

ᴅᴇᴍᴏ

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(); 
 
}

<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>

...次chartjsプラグインを使用して、これを達成できます ^{ChartJS v2.5.0}