Chart.js - 棒グラフと折れ線グラフを混合する - 完全な列を埋めるために線を得ることはできますか？

Question

私はこのようなチャートを作成するためにChart.jsのv2.5.0を使用しています：時々バーが赤い点線の上に移動します

注意を。時々、赤い点線は別の位置にあります（通常は25で、数ヶ月で他のレベルになります）。

私の問題は、赤い点線を列の全幅に広げたいということです。最初の列に表示されているように、赤い点線は列の途中までしか流れません。私はチャートの反対側で同じ問題を抱えています。赤い点線は列の途中にしか流れません。ここ

私の現在の実装では、混合チャートを持つことである1が棒グラフであり、他の折れ線グラフである - そのようなデータで：

data = { 
     labels: ['Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st'] 
     datasets: [ 
      { 
       type: 'bar', 
       label: 'A', 
       data: [10, 25, 18, 37], 
      }, 
      { 
       type: 'line', 
       label: 'B', 
       data: [25, 25, 25, 25], 
       fill: false, 
       borderWidth: 1, 
       borderColor: '#f00', 
       borderDash: [5,4], 
       lineTension: 0, 
       steppedLine: true 
      } 
     ] 
    } 

Chart.jsは作るためのオプションや方法を持っています赤い点線は全列幅まで伸びていますか？

私は別のアイデアがありましたが、これが可能かどうかはわかりません。赤い点線に棒グラフを使用できますか？棒グラフの上線のみを表示できますか？

Answer 1

残念ながら、あなたが望むものを達成するためにチャートを「設定」する方法はありません。それは、折れ線グラフのスケッチがどのように機能するかと関係しています。このことから、 chart.jsで「ダミー」データを使ってこの動作を達成することができます。

基本的に、「ダミー」の最初と最後のラベルを作成します。次に、対応する「ダミー」の最初と最後の値をバーデータ配列に追加します（このデータは表示されません）。次に、ラインデータ配列に対応する「ダミー」の最初と最後の値を追加しますが、次の/前の値と同じ値を設定して、直線で終わるようにしてください（そうしないと、 ）。ここに私が意味することがあります。

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'], 
    datasets: [ 
     { 
     type: 'bar', 
     label: 'A', 
     // the 1st and last value are placeholders and never get displayed on the chart 
     data: [0, 10, 25, 18, 37, 0], 
     }, 
     { 
     type: 'line', 
     label: 'B', 
     // the 1st and last value are placeholders and never get displayed on the chart 
     // to get a straight line, the 1st and last values must match the same value as 
     // the next/prev respectively 
     data: [25, 25, 25, 25, 25, 25], 
     fill: false, 
     borderWidth: 1, 
     borderColor: '#f00', 
     borderDash: [5,4], 
     lineTension: 0, 
     steppedLine: true 
     } 
    ] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      beginAtZero: true 
     } 
     }], 
     xAxes: [{ 
     ticks: { 
      min: 'Jan 21st', 
      max: 'Apr 21st', 
     } 
     }], 
    } 
    } 
}); 

チェックアウト：codepen example