使用react-chartjs-2

时间:2019-06-25 07:31:45

标签: typescript plugins chart.js react-chartjs

我从recharts移到react-chartjs-2库的主要原因是recharts的响应支持较差,但是现在我无法将鼠标悬停在图表上并在显示以下内容的每个索引上显示垂直线每个数据集的值。

我尝试使用关于该主题的少量文档,但运气不好,集成了chartjs-plugin-annotationchartjs-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',
              },
            ],
          },
        }}
      />
    )

谢谢

0 个答案:

没有答案