如何在chartjs中显示堆叠折线图的彩色/堆叠区域的工具提示?

vsikbqxv  于 2023-05-17  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

我有一个堆叠条形图。我在悬停标绘点时显示工具提示。此外,我想显示工具提示悬停的彩色/堆叠区域
下面是我的图表

悬停在蓝色区域时,我想在工具提示中显示“区域A”,悬停在绿色区域时,我想在工具提示中显示“区域B”。
我的工具提示配置如下:

{
  tooltips: {
    displayColors: false,
    callbacks: {
      title: () => {
        return null
      },
      label: function(tooltipItem) {
        const event = R.pathOr(
          {},
          ['_data', 'datasets', tooltipItem.datasetIndex, 'data', tooltipItem.index],
          this
        )
        return [event.title, event.value, event.status]
      }
    }
  }
}
pobjuy32

pobjuy321#

(假设chartjs 4.3)添加intersect:false似乎给予了结果。
请注意,悬停弹出显示(从上到下)蓝色,然后绿色-但堆叠是(从上到下)绿色,然后蓝色...另一个想法是,如果你不能限制弹出窗口只显示值,那么至少以与图表相同的顺序显示列表。
另外,添加插件/工具提示/回调函数可以自定义悬停中的文本-但我不知道如何只显示您悬停的区域。

plugins: {
  tooltip: {
    mode: 'index',
    intersect: false,
    callbacks: {
      label: function(context) {
        var datasetLabel = context.dataset.label || '';
        var value = context.raw.y;

        return context.datasetIndex + ' vs ' + context.dataIndex + ' ... ' + context.dataset.label + ' : ' + context.label + ' = ' + context.formattedValue;
      } // label
    } // end callbacks:
  } //end tooltip
} // end plugins

这将在图表中显示所有系列的悬停(日期上有一个值)。

有关运行示例,请参见https://jsfiddle.net/Abeeee/8df305xg/20/

相关问题