Question

因此，我尝试使用带有react-chartjs-2的chartjs中的自定义工具提示制作分组的条形图

Chart.js版本：2.7.3 react-chartjs版本：2.7.4

对于我正在从事的项目，我需要能够将鼠标悬停在每组数据上并显示工具提示。

我正在遵循有关如何在此处绘制工具提示的说明：custom tooltip

问题是，一旦我将鼠标悬停在一个组上然后将鼠标悬停在另一个组上，就会出现这个奇怪的渲染问题，其中它仅渲染条形的最后一个索引。可以通过声明redraw选项解决该问题，但是图形持续闪烁还有另一个问题。

如果我在setState中显式设置数据并将其传递到条形图组件中，则不会出现这种奇怪的行为。但是，setState（如果未传入参数）应该只保留数据变量。

我可以附加一个已复制问题的代码沙箱：example 我希望所有相同的功能/功能都可以悬停并显示工具提示，而不会出现渲染问题。

也许这不是一个错误，也许它可以使用其他方法工作

对于那些不会打开代码示例的人：

const options = {
  hover: {
    onHover: e => {
      if (e && e.target) {
        e.target.style.cursor = "pointer"
      }
    },
  },
  layout: {
    padding: {
      left: 10,
    },
  },
  legend: {
    display: false,
  },
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    xAxes: [
      {
        gridLines: { display: false },
      },
    ],
    yAxes: [
      {
        gridLines: { display: true },
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
  tooltips: {
    enabled: false,
    mode: "index",
  },
}

const chartData = {
  datasets: [
    { data: [10, 20, 30, 50], label: "zz", backgroundColor: "#4286f4" },
    { data: [30, 20, 10, 40], label: "zz", backgroundColor: "#e5f94a" },
    { data: [0, 15, 20, 30], label: "zz", backgroundColor: "#f2264c" },
  ],
  labels: ["01/12", "02/12", "03/12", "04/12"],
}

将react-chartjs分组的条形图悬停在组上只会渲染最后一个条形图

0 个答案: