我参考这篇文章:
chart.js Line chart with different background colors for each section
我无法使用chart.js版本2.1.6(API已更改),任何想法?
答案 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();
}
});