グラデーションの背景とChartjs

全体のグラデーション背景を加える方法Chart.js そして、データセットのためだけではなく、それが私の最初の質問だった.

チャートプラグイン

The Chartjs Plugins グラフの既定の動作をカスタマイズまたは変更する最も効率的な方法です.それらはバージョン2.1.0で導入されており、バージョン2.5.0で拡張されています.
カスタムプラグインを使用すると、“BeforeDraw”機能を実装するカスタム背景を描画できます.

There were some changes to the plugin interface in the ChartJs version 3, this code example was updated to reflect it, thanks to Hung Tran for pointing me out.

次のプラグインはcustom gradient チャートの背景に

var GradientBgPlugin = {
  beforeDraw: function(chart, args, options) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;

    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
    gradientBack.addColorStop(0, "rgba(60, 174, 163, 0.7)");
    gradientBack.addColorStop(0.5, "rgba(255, 255, 255, 0)");
    gradientBack.addColorStop(1, "rgba(32, 99, 155, 0.7)");

    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom,
      chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
};

次に、カスタム設定プラグインをチャート設定に挿入します.