Chart.js: 如何改变x轴背景颜色?
Chart.js: How to change the x-Axes background color?
我正在使用 "chart.js": "3.0.0" 和 "react-chartjs-2": "^3.0.3" 我正在尝试更改 x 轴背景颜色.
我可以改变字体的颜色,但不能改变背景
我尝试使用
backgroundColor: 'red'
但不工作..
const options = {
scales: {
x: {
ticks: {
font: {
size: 10,
},
backgroundColor: 'red', // not working
color: 'black', // worked
},
},
y: {
min: 0,
max: 10,
ticks: {
stepSize: 2,
},
},
},
};
有人知道怎么改吗?
您可以为此使用自定义内联插件:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
plugins: {
scaleBackgroundColor: {
color: 'yellow'
}
}
},
plugins: [{
id: 'scaleBackgroundColor',
beforeDraw: (chart, args, opts) => {
const {
ctx,
canvas,
chartArea: {
left,
bottom,
width,
}
} = chart;
ctx.beginPath();
ctx.rect(left, bottom, width, (canvas.height - bottom));
ctx.fillStyle = opts.color || 'white'
ctx.fill();
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
编辑:
您还可以在轴设置中使用 backgroundColor
选项:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
scales: {
x: {
backgroundColor: 'yellow'
}
}
},
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
我正在使用 "chart.js": "3.0.0" 和 "react-chartjs-2": "^3.0.3" 我正在尝试更改 x 轴背景颜色.
我可以改变字体的颜色,但不能改变背景
我尝试使用
backgroundColor: 'red'
但不工作..
const options = {
scales: {
x: {
ticks: {
font: {
size: 10,
},
backgroundColor: 'red', // not working
color: 'black', // worked
},
},
y: {
min: 0,
max: 10,
ticks: {
stepSize: 2,
},
},
},
};
有人知道怎么改吗?
您可以为此使用自定义内联插件:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
plugins: {
scaleBackgroundColor: {
color: 'yellow'
}
}
},
plugins: [{
id: 'scaleBackgroundColor',
beforeDraw: (chart, args, opts) => {
const {
ctx,
canvas,
chartArea: {
left,
bottom,
width,
}
} = chart;
ctx.beginPath();
ctx.rect(left, bottom, width, (canvas.height - bottom));
ctx.fillStyle = opts.color || 'white'
ctx.fill();
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
编辑:
您还可以在轴设置中使用 backgroundColor
选项:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
scales: {
x: {
backgroundColor: 'yellow'
}
}
},
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>