ChartJS 我无法使用React注解垂直创建线

56lgkhnf  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(177)

我尝试在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;
      },
    },
  },
},

};

igsr9ssn

igsr9ssn1#

您告诉注解插件,它应该将您的注解链接到一个x标尺,id为:x-axis-1,但在秤台配置中,您仅指定了1个x轴,其id为:xAxes .
因此,要使注记正常工作,需要更改注记中的ID或比例的ID。
第一个

htrmnn0y

htrmnn0y2#

我在注解中添加了下面的代码,并将该行指定为索引,这样就解决了我的问题。任何和我有同样问题的人都可以用这种方法来修复它。
杨帆补充道:

x最大值:1,x最小值:1,y最大值:0,y最小值:16万,

annotation: {
        drawTime: 'afterDraw',
        annotations: [
          {
            display: true,
            type: 'line',
            id: 'x',
            mode: 'vertical',
            borderColor: '#bcc2c7',
            borderDash: [3, 3],
            borderDashOffset: 0,
            borderWidth: 1,
            xScaleID: 'x',
            xMax: 1,
            xMin: 1,
            yMax: 0,
            yMin: 160000,
            value: 'Ağustos 2020',
            label: {
              backgroundColor: '#57b846',
              enabled: true,
              content: 'Bugün',
              position: 'start',
            },
          },
        ],
      },

相关问题