#キャンバスの背景

使用例によっては、キャンバス全体に背景画像や色を表示したい場合があります。これに対する組み込みのサポートはありません。これを実現するには、カスタムプラグインを作成します。

以下の 2 つのプラグインの例では、キャンバスに背景として色または画像を描画する方法を確認できます。チャートに背景を与えるこの方法は、特定の背景を含むチャートをエクスポートする場合にのみ必要です。通常の使用では、背景をより簡単に設定できます。CSS (新しいウィンドウが開きます)。

const 構成 = {
  タイプ: 'ドーナツ'、
  データ: データ、
  オプション: {
    プラグイン: {
      カスタムキャンバスの背景色: {
        色: 'ライトグリーン'、
      }
    }
  }、
  プラグイン: [プラグイン]、
};const config = {
  type: 'doughnut',
  data: data,
  options: {
    plugins: {
      customCanvasBackgroundColor: {
        color: 'lightGreen',
      }
    }
  },
  plugins: [plugin],
};

定数データ = {
  ラベル: [
    '赤'、
    '青'、
    '黄色'
  ]、
  データセット: [{
    ラベル: 「最初のデータセット」、
    データ: [300、50、100]、
    背景色: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ]、
    ホバーオフセット: 4
  }]
};const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

// 注: プラグイン コードへの変更はチャートには反映されません。プラグインはチャートの構築時にロードされ、エディターの変更は chart.update() をトリガーするだけであるためです。
const プラグイン = {
  id: 'customCanvasBackgroundColor',
  beforeDraw: (チャート、引数、オプション) => {
    const {ctx} = チャート;
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = options.color || '#99ffff';
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  }
};// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const plugin = {
  id: 'customCanvasBackgroundColor',
  beforeDraw: (chart, args, options) => {
    const {ctx} = chart;
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = options.color || '#99ffff';
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  }
};

const 構成 = {
  タイプ: 'ドーナツ'、
  データ: データ、
  プラグイン: [プラグイン]、
};const config = {
  type: 'doughnut',
  data: data,
  plugins: [plugin],
};

定数データ = {
  ラベル: [
    '赤'、
    '青'、
    '黄色'
  ]、
  データセット: [{
    ラベル: 「最初のデータセット」、
    データ: [300、50、100]、
    背景色: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ]、
    ホバーオフセット: 4
  }]
};const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

// 注: プラグイン コードへの変更はチャートには反映されません。プラグインはチャートの構築時にロードされ、エディターの変更は chart.update() をトリガーするだけであるためです。
const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
const プラグイン = {
  id: 'customCanvasBackgroundImage',
  beforeDraw: (チャート) => {
    if (image.complete) {
      const ctx = チャート.ctx;
      const {上、左、幅、高さ} = chart.chartArea;
      const x = 左 + 幅 / 2 - image.width/2;
      const y = トップ + 高さ / 2 - 画像.高さ / 2;
      ctx.drawImage(画像, x, y);
    } それ以外 {
      image.onload = () => chart.draw();
    }
  }
};// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
const plugin = {
  id: 'customCanvasBackgroundImage',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

←アニメーションデータ間引き→