Javascript 图表区背景色图表
我对图表js有问题,我想给图表区域着色,如上图所示 我试图从中查找配置,但没有匹配的配置。 是否可以更改图表区域的背景色? 如果可能的话,有人能帮我吗 Html 这是我目前的密码 所以每个人都可以尝试找到解决方案。Javascript 图表区背景色图表,javascript,jquery,canvas,html5-canvas,chart.js,Javascript,Jquery,Canvas,Html5 Canvas,Chart.js,我对图表js有问题,我想给图表区域着色,如上图所示 我试图从中查找配置,但没有匹配的配置。 是否可以更改图表区域的背景色? 如果可能的话,有人能帮我吗 Html 这是我目前的密码 所以每个人都可以尝试找到解决方案。 谢谢您的帮助。没有内置的更改背景颜色的方法,但您可以使用CSS 编辑 如果您想填充图表的确切区域而不是整个div,您可以编写自己的chart.js插件。试穿一下 画布背景在定义上是透明的,就像任何元素一样,因此您只需要在画布中定义背景颜色,例如,在您的情况下,您将需要以下CSS:
谢谢您的帮助。没有内置的更改背景颜色的方法,但您可以使用CSS 编辑 如果您想填充图表的确切区域而不是整个div,您可以编写自己的chart.js插件。试穿一下
画布背景在定义上是透明的,就像任何元素一样,因此您只需要在画布中定义背景颜色,例如,在您的情况下,您将需要以下CSS: 或HTML内联,以澄清这一想法:
<canvas id="barChart" width="600" height="300" style="background-color: #f00;"></canvas>
谢谢您的回答,但我的问题中只需要在图表区域(如图像)内着色,而不需要标签区域,但为什么yAxis不从0开始?@Pajarfathurahman。对不起,是打字错误。这是最终结果。可以为雷达图做sow吗?不是给整条直肠上色,而是只给雷达上色?我有一个相关的问题:。请帮我提个建议。谢谢。这会正确地显示在屏幕上,但当右键单击画布并将其复制或保存为图像时,图像背景仍然未设置(透明)。
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
}
});
ctx.style.backgroundColor = 'rgba(255,0,0,255)';
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);
canvas#barChart {
background-color: #f00;
}
<canvas id="barChart" width="600" height="300" style="background-color: #f00;"></canvas>