问题描述
我正在将一些绘图从 Plot.ly 迁移到 Chart.js v2.9，并且我正在尝试为我的新 Chart.js 绘图添加背景颜色以匹配它们的前身：
但是当我将适当的插件添加到我的 Chart.js 配置时，我得到了这个：
[{
beforeDraw: function (chart,easing) {
let config: DragenChartConfiguration = chart.config;
if (chart.ctx) {
if (config.dragen?.hBars) {
var ctx = chart.ctx;
var chartArea = chart.chartArea;
for (const hBar of config.dragen.hBars) {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left,hBar.from,chartArea.right - chartArea.left,hBar.to - hBar.from);
ctx.restore();
}
}
}
}
}]
其中每个“Hbar”对象仅定义了我想要着色的颜色和 Y 轴范围：
hBars: Array(3)
0: {from: 28,to: 100,color: "rgb(195,230,195)"}
1: {from: 20,to: 28,color: "rgb(230,220,195)"}
2: {from: 0,to: 20,195,195)"}
length: 3
我在这里遗漏了什么？
解决方法
您正在获取原始值而不是获取这些值的像素，如果您这样做，它将起作用：
插件 V3：
{
id: 'backgrounds',beforeDraw: (chart,args,options) => {
const { ctx,chartArea,scales: {y} } = chart;
options.hbars.forEach((hBar) => {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left,y.getPixelForValue(hBar.from),chartArea.right - chartArea.left,y.getPixelForValue(hBar.to) - y.getPixelForValue(hBar.from));
ctx.restore();
})
}
}
插件 V2：
{
id: 'backgrounds',x,scales } = chart;
const y = scales['y-axis-0']
options.hbars.forEach((hBar) => {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left,y.getPixelForValue(hBar.to) - y.getPixelForValue(hBar.from));
ctx.restore();
})
}
工作示例 V3：
var options = {
type: 'line',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [100,19,3,5,2,3],borderWidth: 1
},{
label: '# of Points',data: [7,11,8,7],borderWidth: 1
}
]
},options: {
plugins: {
backgrounds: {
hbars: [{
from: 28,to: 100,color: "rgb(195,230,195)"
},{
from: 20,to: 28,color: "rgb(230,220,{
from: 0,to: 20,195,195)"
}
]
}
}
},plugins: [{
id: 'backgrounds',options) => {
const {
ctx,scales: {
y
}
} = chart;
options.hbars.forEach((hBar) => {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left,y.getPixelForValue(hBar.to) - y.getPixelForValue(hBar.from));
ctx.restore();
})
}
}]
}
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.2.0/chart.js"></script>
</body>工作示例 V2：
var options = {
type: 'line',scales
} = chart;
const y = scales['y-axis-0']
options.hbars.forEach((hBar) => {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left,options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>