[英]Chart area background color chartjs
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.我尝试从charJs Docs中查找配置,但没有匹配项。 its possible or not to change chart area background color?
是否可以更改图表区域的背景颜色? if possible anyone can help me?
如果可能的话,有人可以帮助我吗?
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.
谢谢你的帮助。
There is no built-in method to change background color, but you can use CSS.没有内置方法可以更改背景颜色,但您可以使用 CSS。 JSFiddle .
JSF中。
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.如果你想填充图表的确切区域而不是整个 div,你可以编写自己的 chart.js 插件。 Try it on JSFiddle .
在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);
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>
This works on latest chartjs这适用于最新的chartjs
const custom_canvas_background_color = {
id: 'custom_canvas_background_color',
beforeDraw: (chart, args, options) => {
const {
ctx,
chartArea: { top, right, bottom, left, width, height },
scales: { x, y },
} = chart;
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = '#E5E5E5';
ctx.fillRect(left, top, width, height);
ctx.restore();
},
};
Then add as plugin然后添加为插件
plugins: [custom_canvas_background_color]
You can achieve this by implementing this Chartjs plugin plugin / example .您可以通过实现这个 Chartjs 插件插件/ 示例来实现这一点。 The plugin allows you to enhance your chart.
该插件允许您增强图表。 For example zoom in or pan on to your chart.
例如放大或平移到您的图表。 But also change the background color.
而且还要改变背景颜色。 Using
setBackgroundColor(color); //updates the background color of the chart
使用
setBackgroundColor(color); //updates the background color of the chart
setBackgroundColor(color); //updates the background color of the chart
. setBackgroundColor(color); //updates the background color of the chart
。
If you want to set a colour for the whole Canvas (and not just the plotting area), you can do it like this:如果要为整个 Canvas(而不仅仅是绘图区域)设置颜色,可以这样做:
Chart.pluginService.register({
beforeDraw: ({ config: { options }, ctx }) => {
if (options.chartArea?.backgroundColor) {
ctx.save();
ctx.fillStyle = options.chartArea.backgroundColor;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.restore();
}
}
});
const chart = new Chart(document.getElementById('chart'), {
options: {
chartArea: {
backgroundColor: 'rgba(255, 255, 255, 1)'
}
}
});
This will be applied to the PNG when using chart.toBase64Image()
使用
chart.toBase64Image()
时,这将应用于 PNG
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.