本文介绍了如何在yAxis Chartjs的两行之间添加背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我如何在chartjs
中的Y轴的两行之间添加背景颜色,如果您选中该图,我需要能够执行以下操作:
在两行之间设置颜色,第一个是橙色,然后是蓝色或其他颜色,
i检查了官方文档,但我什么都没找到。
How i can add background color between two lines in Y-Axis in chartjsif you checked the figure i need to be able to do something like thisset a color between two lines first one is orange and then blue or whatever,i checked the official docs but i didn't find anything.
这也是我的chartjs配置
also here is my chartjs configurations
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
推荐答案
您必须注册自己的在图表线条绘制之前填充chartArea:
You have to register your own plugin to fill chartArea before chart line drawing:
Chart.pluginService.register({
beforeDraw: function (chart, easing) {
if (chart.config.options.fillColor) {
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
ctx.save();
ctx.fillStyle = chart.config.options.fillColor;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.restore();
}
}
});
var chartData = {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
label: 'value',
backgroundColor: 'rgba(255, 0, 255, 0.8)',
borderColor: 'blue',
data: [30, 50, 25, 10]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{ ticks: { max: 60 } }]
},
legend: { display: false },
fillColor: 'rgba(255, 128, 0, 0.8)',
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>
这篇关于如何在yAxis Chartjs的两行之间添加背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!