我尝试在react注解的帮助下创建一条线来显示今天的日期,但是我没有成功。我的线总是在x轴和y轴之间保持水平。我做错了什么呢?这就是它现在的样子。
但我想让它看起来像这样垂直:
这是我的暗语:
const datas = {
labels: monthNames,
datasets: [
{
type: 'line',
data: monthDatas,
// fill: true,
// backgroundColor: 'red',
backgroundColor: 'rgba(229, 245, 226, 0.6)',
borderColor: '#57b846',
hoverBackgroundColor: '#57b846',
hoverBorderColor: 'white',
hoverBorderWidth: 2,
// borderDash: [1, 1],
},
{
type: 'scatter',
label: 'Bu İlanın Fiyatı',
data: [null, null, null, 30000],
fill: false,
radius: 7,
backgroundColor: '#08bbb6',
borderColor: '#08bbb6',
pointStyle: 'circle',
hoverBorderWidth: 10,
},
],
};
const options = {
elements: {
line: {
tension: 0.000001,
},
},
responsive: true,
scales: {
y: {
stacked: true,
grid: {
circular: true,
drawTicks: false,
},
ticks: {
padding: 9,
beginAtZero: true,
callback(value) {
return value === 0 ? value : `${numberFormatter.format(value)} TL`;
},
},
},
xAxes: {
grid: {
drawOnChartArea: false,
drawTicks: true,
padding: -10,
},
ticks: {
z: 1,
},
},
},
plugins: {
annotation: {
annotations: [
{
type: 'line',
id: 'a-line-1',
mode: 'vertical',
borderColor: 'black',
borderWidth: 1,
// display: (ctx) => ctx.chart.isDatasetVisible(1),
scaleID: 'x-axis-1',
value: parseFloat(130000),
label: {
enabled: true,
content: 'Bugün',
// position: 'start'
},
},
// {
// type: 'point',
// backgroundColor: 'rgba(0, 255, 255, 0.4)',
// borderColor: 'black',
// borderWidth: 3,
// scaleID: 'y',
// xValue: (ctx) => value(ctx, 0, 1, 'x'),
// yValue: (ctx) => value(ctx, 0, 0, 'y'),
// },
],
},
legend: false,
tooltip: {
backgroundColor: '#fcfcfc',
titleColor: '#2d393e',
bodyColor: '#8f9fa9',
borderWidth: 1,
borderColor: '#bcc2c6',
displayColors: false,
callbacks: {
title: (data) => {
if (data[0]?.dataset?.type !== 'scatter') {
return `${data[0].formattedValue} TL`;
}
return null;
// (data[0].formattedValue == 0 ? data[0].formattedValue : `${data[0].formattedValue} TL`),
},
label: (labels) => {
if (labels?.dataset?.type === 'scatter') {
return `${labels.dataset.label}: ${labels.formattedValue} TL`;
}
return labels.label;
},
},
},
},
};
2条答案
按热度按时间igsr9ssn1#
您告诉注解插件,它应该将您的注解链接到一个x标尺,id为:
x-axis-1
,但在秤台配置中,您仅指定了1个x轴,其id为:xAxes
.因此,要使注记正常工作,需要更改注记中的ID或比例的ID。
第一个
htrmnn0y2#
我在注解中添加了下面的代码,并将该行指定为索引,这样就解决了我的问题。任何和我有同样问题的人都可以用这种方法来修复它。
杨帆补充道:
x最大值:1,x最小值:1,y最大值:0,y最小值:16万,