我在一个Vue 2项目中使用chart.js@2.9.4和chartjs-plugin-annotation@0.5.7。我能够用一条线构建一个图表,但是框总是扩展到边缘,我不确定这个问题是否与我的x轴有关,因为值是字符串(月)。
import Chart from 'chart.js';
import AnnotationPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(AnnotationPlugin);
new Chart(lineChart.value, {
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
label: 'Dataset 1',
data: [120, 125, 128, 121, 130, 125, 135],
borderColor: '#018572',
backgroundColor: 'green',
lineTension: 0.1,
fill: false,
},
{
label: 'Dataset 2',
data: [81, 85, 88, 90, 83, 82, 80],
borderColor: '#9F642C',
backgroundColor: 'brown',
lineTension: 0.1,
fill: false,
},
],
},
options: {
title: {
display: true,
text: 'Chart.js Line Chart',
},
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black',
},
},
annotation: {
annotations: [
{
drawTime: 'afterDraw',
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '25',
borderColor: 'red',
borderWidth: 2,
},
{
type: 'box',
drawTime: 'beforeDatasetsDraw',
id: 'a-box-1',
xScaleID: 'x',
xMax: 'July',
xMin: 'January',
yScaleID: 'y',
yMax: 140,
yMin: 120,
backgroundColor: 'green',
},
],
},
},
});
这是我经常得到的结果:
我需要缩小y轴的方框,因为我需要在图表中显示两个波段。我真的很感激任何帮助和建议。
1条答案
按热度按时间l7mqbcuq1#
我认为这个问题与
xScaleID
和yScaleID
值有关。您将'x'
和'y'
设置为值,但在chart.js 2中,默认刻度ID是不同的。实际上,在线条注解中,您设置的是'y-axis-0'
。也就是说,我认为设置xScaleID: 'x-axis-0'
和yScaleID: 'y-axis-0'
应该可以工作。