图表区域背景颜色chartjs

我有图表js的问题，我想像上面的图像着色图表区域

我试图从charJs Docs中找到配置，但没有匹配。 它是否可以改变图表区域的背景颜色？ 如果可能，任何人都可以帮助我

HTML

使用Javascript

 var ctx = document.getElementById("barChart"); var barChart = new Chart(ctx,{ type: 'bar', data: { labels:["Label1","Label2","Label3","Label4"], borderColor : "#fffff", datasets: [ { data: ["2","3","1","4"], borderColor : "#fff", borderWidth : "3", hoverBorderColor : "#000", backgroundColor: [ "#f38b4a", "#56d798", "#ff8397", "#6970d5" ], hoverBackgroundColor: [ "#f38b4a", "#56d798", "#ff8397", "#6970d5" ] }] }, options: { scales: { yAxes: [{ ticks:{ min : 0, stepSize : 1, fontColor : "#000", fontSize : 14 }, gridLines:{ color: "#000", lineWidth:2, zeroLineColor :"#000", zeroLineWidth : 2 }, stacked: true }], xAxes: [{ ticks:{ fontColor : "#000", fontSize : 14 }, gridLines:{ color: "#fff", lineWidth:2 } }] }, responsive:false } }); 

这是我目前的代码jsFiddle

所以每个人都可以尝试寻找解决方案 谢谢你的帮助。

Answer 1

没有内置方法来更改背景颜色，但您可以使用CSS。 JSFiddle 。

 ctx.style.backgroundColor = 'rgba(255,0,0,255)'; 

编辑

如果你想填充图表的确切区域而没有整个div，你可以编写自己的chart.js插件。 在JSFiddle上试试吧。

  Chart.pluginService.register({ beforeDraw: function (chart, easing) { if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { var ctx = chart.chart.ctx; var chartArea = chart.chartArea; ctx.save(); ctx.fillStyle = chart.config.options.chartArea.backgroundColor; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); ctx.restore(); } } }); var config = { type: 'bar', data: { labels:["Label1","Label2","Label3","Label4"], borderColor : "#fffff", datasets: [ { data: ["2","3","1","4"], borderColor : "#fff", borderWidth : "3", hoverBorderColor : "#000", backgroundColor: [ "#f38b4a", "#56d798", "#ff8397", "#6970d5" ], hoverBackgroundColor: [ "#f38b4a", "#56d798", "#ff8397", "#6970d5" ] }] }, options: { scales: { yAxes: [{ ticks:{ min : 0, stepSize : 1, fontColor : "#000", fontSize : 14 }, gridLines:{ color: "#000", lineWidth:2, zeroLineColor :"#000", zeroLineWidth : 2 }, stacked: true }], xAxes: [{ ticks:{ fontColor : "#000", fontSize : 14 }, gridLines:{ color: "#fff", lineWidth:2 } }] }, responsive:false, chartArea: { backgroundColor: 'rgba(251, 85, 85, 0.4)' } } }; var ctx = document.getElementById("barChart").getContext("2d"); new Chart(ctx, config);