Chart.js v2 - スタックされた棒グラフと2つのスタックされていない線の組み合わせ

Question

Chart.js v2.xは、1つのy軸を利用して2つのスタックされていない線を組み合わせた棒グラフを生成できますか？もしそうなら、どうですか？

以下のフィドルはy軸が2つあります。下向きの線は、右のy軸が左の軸のように6000の最大値を持つならば、より良くレンダリングされます。

jsfiddle example。

以下は参考用のコードです。

 // set default no fill beneath the line 
     Chart.defaults.global.elements.line.fill = false; 


     // stacked bar with 2 unstacked lines - nope 
     var barChartData = { 
      labels: ['2016', '2017', '2018', '2019'], 
      datasets: [{ 
      type: 'bar', 
      label: 'a', 
      yAxisID: "y-axis-0", 
      backgroundColor: "rgba(217,83,79,0.75)", 
      data: [1000, 2000, 4000, 5000] 
      }, { 
      type: 'bar', 
      label: 'b', 
      yAxisID: "y-axis-0", 
      backgroundColor: "rgba(92,184,92,0.75)", 
      data: [500, 600, 700, 800] 
      }, { 
      type: 'line', 
      label: 'c', 
      yAxisID: "y-axis-0", 
      backgroundColor: "rgba(51,51,51,0.5)", 
      data: [1500, 2600, 4700, 5800] 
      }, { 
      type: 'line', 
      label: 'd', 
      yAxisID: "y-axis-1", 
      backgroundColor: "rgba(151,187,205,0.5)", 
      data: [5000, 3000, 1000, 0] 
      }] 
     }; 


     var ctx = document.getElementById("chart").getContext("2d"); 
     // allocate and initialize a chart 
     var ch = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      options: { 
      title: { 
       display: true, 
       text: "Chart.js Bar Chart - Stacked" 
      }, 
      tooltips: { 
       mode: 'label' 
      }, 
      responsive: true, 
      scales: { 
       xAxes: [{ 
       stacked: true 
       }], 
       yAxes: [{ 
       stacked: true, 
       position: "left", 
       id: "y-axis-0", 
       }, { 
       stacked: false, 
       position: "right", 
       id: "y-axis-1", 
       }] 
      } 
      } 
     }); 

Answer 1

私は、2つのy軸が同じ縮尺を使用するように修正または2つが必要でした。このjsfiddleを参照してください。今すぐチャートがより良くレンダリングされます。キーは、私の場合には、両方のyAxesオブジェクトにticksノードと、これら2つのプロパティを追加している：

ticks: { 
    beginAtZero: true, 
    suggestedMax: 5800 
} 

当然、suggestedMax値は、ハードコードされないであろう。さらに、2つのスケールが同じになったので、このプロパティ設定で正しいスケールを隠しましたdisplay: false。

フィドルが示すように、積み重ねられた棒グラフに2つの非積み上げ線がうまく表示されるようになりました。