Question

我正在使用图表js 2显示多个折线图。我想设置一个自定义工具提示，以便当用户将鼠标悬停在图形上的某个点时可以查看其他数据。但是，每次我添加一个回调函数（无论该函数返回什么）时，都会导致工具提示消失。它会在短时间内正确呈现我的自定义文本，但随后消失。我必须不断地移动鼠标才能阅读工具提示。这是有关此功能https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback

的文档

我已经尝试过更改几乎所有图表选项。我目前正在使用回调函数“标签”，但我也尝试过beforeLabel和afterLabel。我注意到的一件事是当我更改“ animation：{duration}”的值时产生了影响。当前设置为0是因为图表变化时我不希望其他任何动画，因为它们经常更新。我将其设置为1000，我注意到工具提示持续了更长的时间并且背景变暗，但是整个图表的渲染似乎变慢了。我还将回调函数的格式从箭头函数更改为常规函数。

这是我的图表选项，其相关部分在末尾处的间距更大：

const chartOptions = {
        legend: {
          labels: {
            fontColor: NUMBER_COLOR,
            fontSize: 12
          }
        },
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: "Frame",
              fontColor: SCALE_LABEL_COLOR,
              fontSize: 14
            },
            stepSize: ystep,
            ticks: {
              min: XMIN,
              max: XMAX,
              stepSize: (XMAX - XMIN) / TICK_NUMS,
              maxRotation: 0,
              minRotation: 0,
              fontColor: NUMBER_COLOR,
              fontSize: 12
            },
            type: "linear"
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: this.props.yAxisUnits,
              fontColor: SCALE_LABEL_COLOR,
              fontSize: 14
            },
            ticks: {
              id: "0",
              min: yChartMin,
              max: yChartMax,
              stepSize: Number(((yChartMax - yChartMin) / TICK_NUMS).toFixed(DECIMAL_NUM)),
              maxRotation: 0,
              minRotation: 0,
              display: true,
              fontColor: NUMBER_COLOR,
              fontSize: 13
            }
          }]
        },


        animation: {
          duration: 0
        },
        tooltips: {
          intersect: true,
          mode: "nearest",
          enabled: true,
          callbacks: {
            label: (tooltipItems, data) => {
              const labelText = [
                data.datasets[tooltipItems.datasetIndex].label + ": " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].y,
                "Time: " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].time
              ];
              return labelText;
            }
          }
        }
      };

数据点本身遵循以下格式：

{
    x: xValue,
    y: yValue,
    time: timeValue
}

我的图表通过以下方式显示：

<Line
  data={chartData}
  options={chartOptions}
  width={DEFAULT_WIDTH}
  height={DEFAULT_HEIGHT}
  getElementAtEvent={(e: any) => this.clickedElement(e)}
/>

当我删除回调函数“标签”时，工具提示仍然存在并按预期显示。如果您可以通过任何方式提供帮助，请告诉我。

谢谢！

使用chart.js时，自定义工具提示在渲染后立即消失

0 个答案: