Вертикальная линия при наведении курсора в LineChart с использованием response-chartjs-2 - PullRequest
Новая
       26

Вертикальная линия при наведении курсора в LineChart с использованием response-chartjs-2

0 голосов
/ 25 июня 2019

Я перешел из библиотеки recharts в react-chartjs-2 в основном потому, что recharts имеет слабую адаптивную поддержку, но теперь мне не хватает возможности навести курсор на диаграмму и отобразить вертикальную линию на каждом индексе, которая показывает значение каждого набора данных в один раз.

Я попытался объединить chartjs-plugin-annotation и chartjs-plugin-crosshair, используя небольшую документацию по этому вопросу, но безуспешно. Может кто-нибудь показать мне, как это сделать?

Мой текущий код выглядит так: 

    const datasets = keys.map(lineKey => ({
      fill: false,
      label: keyToNameMap[lineKey],
      data: data.map(datum => ({ t: datum.date, y: datum.lines[lineKey] })),
      borderColor: keyToStrokeMap[lineKey],
      pointHitRadius: 10,
      lineTension: 0,
      borderJoinStyle: 'round',
    }))

    return (
      <Line
        height={height}
        width={width}
        data={{
          labels: data.map(x => x.date),
          datasets,
        }}
        options={{
          maintainAspectRatio: false,
          spanGaps: false,
          scales: {
            xAxes: [
              {
                type: 'time',
                distribution: 'linear',
              },
            ],
          },
        }}
      />
    )

Спасибо

...