帮我找出我的错误。
我使用chart.js 2.7.0。我有一个条形图,想添加两条线。其中一条应该是直的,通过所有图表。我尝试了两种方法,但它没有帮助我。
在第一种方法中,我向***数据集添加了***个值:
export const chartConfiguration = () => ({
type: 'bar',
data: {
labels: null,
datasets: [
{
label: 'Hourly',
fill: false,
data: [0.3494, 0.3361, 0.325, 0.3224],
borderColor: '#ff0000',
pointBackgroundColor: '#ff0000',
type: 'line',
},
{
label: 'Average',
fill: false,
data: Array(4).fill(1),
borderColor: '#d67735',
pointBackgroundColor: '#d67735',
type: 'line',
pointRadius: 0,
pointHitRadius: 0,
lineTension: 0,
beginAtZero: true
}]
},
options: {
title: {
display: true,
position: 'top',
fontColor: '#3f7ba2',
fontStyle: 550,
fontSize: 15
},
legend: {display: false},
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 550,
fontSize: 11,
padding: 5
},
gridLines: {
color: '#dedfe7'
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 15
}
}],
},
annotation: {
events: ['mouseenter', 'mouseleave'],
annotations: []
},});
我以为这样就行了,但我错了。问题是第一行带有标签“Hourly”的值为0.3494,而第二行带有标签:'Average'有一个值= 1。Chart.js绘制第二条线的值不是1,它绘制它的值0.3494 + 1 = 1.3494。我试图找到任何选项,如beginFromZero,但在这里它不存在以下是屏幕截图:
1.我试了第二个办法:我添加了一个插件,但它根本不工作,我不知道为什么:
export const chartConfiguration = () => ({
type: 'bar',
data: {
labels: null,
datasets: [{
label: ' ',
data: [1.9 , 2.0, 1.7, 1.8],
borderColor: '#b1c8de',
backgroundColor: '#b1c8de',
pointBackgroundColor: '#b1c8de',
tension: 0,
fill: false,
offsetGridLines: true
}]
},
options: {
title: {
display: true,
position: 'top',
text: currentFullDate,
fontColor: '#3f7ba2',
fontStyle: 550,
fontSize: 15
},
legend: {display: false},
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 550,
fontSize: 11,
padding: 5
},
gridLines: {
color: '#dedfe7'
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 15
}
}],
},
config : {
plugins: {
afterDatasetsDraw: function(chart) {
let lineAt = 1;
const ctxPlugin = chart.chart.ctx;
const xAxe = this._chart.scales[chart.config.options.scales.xAxes[0].id];
const yAxe = this._chart.scales[chart.config.options.scales.yAxes[0].id];
if (yAxe.min !== 0) {
return;
}
ctxPlugin.strokeStyle = '#d67735';
ctxPlugin.beginPath();
lineAt = (lineAt - yAxe.min) * (100 / yAxe.max);
lineAt = (100 - lineAt) / 100 * (yAxe.height) + yAxe.top;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.stroke();
}
} }
});
1条答案
按热度按时间iklwldmw1#
就像我在评论中说的,这种行为的发生是因为你堆叠了你的y轴。