Может кто-нибудь, имеющий опыт работы с chartjs, указать, почему происходит эта ошибка? - PullRequest
Новая
       28

Может кто-нибудь, имеющий опыт работы с chartjs, указать, почему происходит эта ошибка?

0 голосов
/ 11 февраля 2019

Я использую «response-chartjs-2» для своих графиков.И у меня есть такая странная ошибка, что иногда моя диаграмма уменьшается или увеличивается после загрузки страницы.Я должен также упомянуть, что я также использую «chartjs-plugin-annotation», чтобы показать текст «Average Rate», но проблема также возникает без текстовой метки.

Там нет ошибки, что когда-либо, и дляВ целях тестирования я продублировал его 3 раза, чтобы протестировать различные варианты (возможно, что-то в опциях вызывает это), но безуспешно.

Лучше всего предположить, что сгенерированный элемент canvas не всегда наследует высоту и ширину родительского контейнера (offsetHeight | offsetWidth) при загрузке, это должно происходить по умолчанию из функции, но я даже пытался передать эти значения сссылка на ResponsiveChart (родительский div) все еще не помогает.

Вот скриншот того, что происходит.Это случается только иногда, и после изменения размера окна оно исправляется.Любой совет был бы здесь полезен.

Снимок экрана

Снимок экрана 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,
  };
}
...