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

时间:2016-07-07 09:27:34

标签: javascript chart.js

我参考这篇文章:

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

我无法使用chart.js版本2.1.6(API已更改),任何想法?

1 个答案:

答案 0 :(得分:0)

我这样做了:

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();
    }
  });