我有下面的图表:
如何确保蓝线未填充,但同时位于填充的红线之上?
以文档中的折线图为例,我尝试过使用drawTime
属性,但是正如您所看到的,蓝线位于红线的前景上,* 但是它被填充了 *(我希望蓝线位于前景上,但是没有被填充)。
以下是我目前掌握的情况:
数据来源:
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Dataset 1',
data: generateData(),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
fill: true
},
{
label: 'Dataset 2',
data: generateData(),
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
// changed `fill` propery from `true` to `false`
fill: false
}
]
};
设定:
const config = {
type: 'line',
data: data,
options: {
plugins: {
filler: {
propagate: false,
// added `drawTime` property here
drawTime: "beforeDraw",
},
title: {
display: true,
text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
}
},
pointBackgroundColor: '#fff',
radius: 10,
interaction: {
intersect: false,
}
},
};
设定:
const inputs = {
min: -100,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
const generateLabels = () => {
return Utils.months({count: inputs.count});
};
Utils.srand(3);
const generateData = () => (Utils.numbers(inputs));
1条答案
按热度按时间nbysray51#
这看起来像是chart.js本身的一个bug。您有3个选择:
第一个
编辑:
在查看源代码后,它似乎确实是chart.js中的一个错误,它没有检查是否填充已设置为假,因此它将始终填充非默认模式。将对此进行修复,因此它将在版本3.8.1中修复