折れ線グラフのchart.jsグリッドカラーの設定方法

Question

オプションフィールドを使用して折れ線グラフのグリッドの色を変更したいところですが、どこから始めるのか分かりません。 私は最初にグラデーションを使ってキャンバスのバックグラウンドカラーを変更しようとしましたが、結果は良くありませんでした。

canvas{ 
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%); 
} 

しかし、私はあなたが上記の画像で見るように、だけでなく、グリッドが着色されただけでなく、x値、yのラベルやグラフの凡例があまりにも色されたので、私は欲しいものを取得できませんでした。

Picture of the result I'm getting with this css code

Example of what I want to get

私chart.jsオプションだから

options = { 
     scales: { 
      xAxes: [{ 
      gridLines: { 
       color: 'rgba(171,171,171,1)', 
       lineWidth: 1 
      } 
      }], 
      yAxes: [{ 
      ticks: { 
       beginAtZero: true, 
       max: 100, 
       min: 0, 
       stepSize: 10 
      }, 
      gridLines: { 
       color: 'rgba(171,171,171,1)', 
       lineWidth: 0.5 
      } 
      }] 
     }, 
     responsive: true 
     }; 

あり、3色（グラデーション付きかどうか）にのみグリッドの背景を設定する方法はありますか？ 注意：私はangle2（ng2-charts）でchart.jsを使用しています

Answer 1

最も簡単な方法は、chartjs-plugin-annotationプラグインを使用し、Y軸にバインドされた3つのボックス注釈を設定することです異なる色）。

これは以下の例です（これは実際にはcodepenと表示されています）。

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    datasets: [{ 
     label: 'Points', 
     data: [ 
     {x: 0, y: 2}, 
     {x: 1, y: 3}, 
     {x: 2, y: 2}, 
     {x: 1.02, y: 0.4}, 
     {x: 0, y: -1} 
     ], 
     backgroundColor: 'rgba(123, 83, 252, 0.8)', 
     borderColor: 'rgba(33, 232, 234, 1)', 
     borderWidth: 1, 
     fill: false, 
    }], 
    }, 
    options: { 
    title: { 
     display: true, 
     text: 'Chart.js - Gridline Background', 
    }, 
    scales: { 
     xAxes: [{ 
     type: 'linear', 
     position: 'bottom', 
     ticks: { 
      min: -1, 
      max: 8, 
      stepSize: 1, 
      fixedStepSize: 1, 
     }, 
     gridLines: { 
      color: 'rgba(171,171,171,1)', 
      lineWidth: 1 
     } 
     }], 
     yAxes: [{ 
     afterUpdate: function(scaleInstance) { 
      console.dir(scaleInstance); 
     }, 
     ticks: { 
      min: -2, 
      max: 4, 
      stepSize: 1, 
      fixedStepSize: 1, 
     }, 
     gridLines: { 
      color: 'rgba(171,171,171,1)', 
      lineWidth: 0.5 
     } 
     }] 
    }, 
    annotation: { 
     annotations: [{ 
     type: 'box', 
     yScaleID: 'y-axis-0', 
     yMin: 1, 
     yMax: 4, 
     borderColor: 'rgba(255, 51, 51, 0.25)', 
     borderWidth: 2, 
     backgroundColor: 'rgba(255, 51, 51, 0.25)', 
     }, { 
     type: 'box', 
     yScaleID: 'y-axis-0', 
     yMin: -1, 
     yMax: 1, 
     borderColor: 'rgba(255, 255, 0, 0.25)', 
     borderWidth: 1, 
     backgroundColor: 'rgba(255, 255, 0, 0.25)', 
     }, { 
     type: 'box', 
     yScaleID: 'y-axis-0', 
     yMin: -2, 
     yMax: -1, 
     borderColor: 'rgba(0, 204, 0, 0.25)', 
     borderWidth: 1, 
     backgroundColor: 'rgba(0, 204, 0, 0.25)', 
     }], 
    } 
    } 
}); 

それは注釈が、チャートの上に描かれていることに注意することが重要ですので、あなたの注釈の色は、その背後にあるものを見るために、いくつかの透明性を含んでいる必要があります。

ng2-chartsでこのプラグインを使用しても問題ありません。アプリのhtmlファイルの<script>にソースを追加し、optionsオブジェクトにannotationプロパティを追加してください。注釈プラグインの使い方を示すAngular2/ng2-chart exampleがあります。