javascript - 每个部分的Chart.js 2.1.6背景颜色

我指的是这篇文章：

chart.js Line chart with different background colors for each section

而且我无法使其与chart.js 2.1.6版（API发生更改）一起使用，知道吗？

最佳答案

我这样做：

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.chartArea) {
      var helpers = Chart.helpers;
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;
      var chartWidth = chartArea.right - chartArea.left;
      var chartHeight = Math.abs(chartArea.top - chartArea.bottom);
      ctx.save();

      var pattern = document.createElement('canvas');
      pattern.width = 40;
      pattern.height = chartHeight;
      var pctx = pattern.getContext('2d');

      pctx.fillStyle = "#f0f2f5";
      pctx.fillRect(0, 0, 20, chartHeight);
      pctx.fillStyle = "#ffffff";
      pctx.fillRect(20, 0, 20, chartHeight);

      var pattern = ctx.createPattern(pattern, "repeat");
      ctx.fillStyle = pattern;

      ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      ctx.restore();
    }
  });