Javascript 图表区域背景色chartjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38493564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart area background color chartjs
提问by Pajar Fathurrahman
I have problem with chart js, i want to coloring chart area like image above
我的图表 js 有问题，我想为上图的图表区域着色
I try to find configuration from charJs Docs, but nothing matched. its possible or not to change chart area background color? if possible anyone can help me?
我尝试从charJs Docs 中找到配置，但没有匹配。是否可以更改图表区域的背景颜色？如果可能的话，有人可以帮助我吗？
Html
html
<canvas id="barChart" width="600" height="300"></canvas>
Javascript
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
}
});
Here's my current code jsFiddle
这是我当前的代码jsFiddle
so everyone can try for find solution. thanks for your help.
所以每个人都可以尝试找到解决方案。谢谢你的帮助。
回答by
There is no built-in method to change background color, but you can use CSS. JSFiddle.
没有内置方法来更改背景颜色，但您可以使用 CSS。JSFiddle。
ctx.style.backgroundColor = 'rgba(255,0,0,255)';
EDIT
编辑
If you want to fill exact area of chart and no whole div, you can write your own chart.js plugin. Try it on JSFiddle.
如果您想填充图表的确切区域而不是整个 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);
回答by dmonti
The canvas background is transparent by definition, like any element, so you just need to define the background-color in your canvas, for example, in your case you will need this CSS:
根据定义，画布背景是透明的，就像任何元素一样，因此您只需要在画布中定义背景颜色，例如，在您的情况下，您将需要以下 CSS：
canvas#barChart {
background-color: #f00;
}
or HTML inline, to clarify the idea:
或 HTML 内联，以阐明这个想法：
<canvas id="barChart" width="600" height="300" style="background-color: #f00;"></canvas>
