Question

我在图表中使用“ react-chartjs-2”。而且我有一个奇怪的错误，有时页面加载后，我的图表有时会缩小或放大。我还应该提到，我还使用了“ chartjs-plugin-annotation”来显示“平均费率”文本，但是在没有文本标签的情况下也会发生此问题。

迄今为止没有任何错误，出于测试目的，我已将其重复3次以测试不同的选项（可能是选项中的某些原因导致了这种情况），但是没有运气。

我的最佳猜测是，生成的canvas元素在加载时并不总是继承父容器的高度和宽度（offsetHeight | offsetWidth），默认情况下应从该函数发生，但是我什至尝试将这些值与ref一起传递ResponsiveChart（父div）仍然没有帮助。

这是正在发生的事情的屏幕截图。这仅在某些情况下发生，并且在调整窗口大小后会自行修复。任何建议在这里都很好。

Screenshot

Screenshot 2

我尝试更改折线图的可用选项以进行大小调整/缩放，到目前为止，没有任何效果。

渲染中的代码：

<ChartWrapper>
    <ChartTitle className="chart-title">Title</ChartTitle>
    <ResponsiveChart maxwidth="80vw" flex="1">
        <Line data={chartData} {...lineProps} />
    </ResponsiveChart>
</ChartWrapper>

lineProps对象（选项）：

{
  options: {
        annotation: {
        events: ['click'],
        annotations: [
          {
            drawTime: 'afterDatasetsDraw',
            id: 'averageRate',
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: chartData,
            borderDash: [30, 20],
            borderColor: '#a2a2a2',
            borderWidth: 1,
            pointRadius: 0,
            lineTension: 0,
            fill: true,

            label: {
              fontSize: 13,
              position: 'left',
              yAdjust: -10,
              fontColor: '#a0a0a0',
              backgroundColor: 'transparent',
              content: 'Average Rate',
              enabled: true,
            },
          },
        ],
      },
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        display: false,
      },
      scales: {
        yAxes: [
          {
            display: true,
            ticks: {
              suggestedMin: 0,
              suggestedMax: 100,
            },
            gridLines: {
              color: '#E0E0E0',
              lineWidth: 1,
            },
          },
        ],
        xAxes: [
          {
            gridLines: {
              color: '#E0E0E0',
              lineWidth: 1,
            },
          },
        ],
      },
    },
    height: 300,
    width: 700,
  };
}

可以使用Chartjs的人指出为什么会发生此错误吗？

0 个答案: