Highcharts提示?如何向hiccharts DOM组件添加类或id ?

Highcharts tips ? How can I add a class or an id to an Hichcharts DOM component?

本文关键字:添加 组件 id DOM hiccharts 提示 Highcharts      更新时间:2023-09-26

我想:

    当一个xAxis标题悬停时显示一个工具提示。
  • 图例元素被选中/取消选中时的触发函数。
  • 在rect html元素上触发点击时的触发函数。
  • 每列只显示一个dataLabel

对于我的前两个目标,我还没有找到我在Highcharts API参考中搜索的东西。实际上,我使用Jquery选择器$("#graph span:eq(0)")(与Highcharts选项useHTML启用)选择所有的传说元素,我需要和选择器$("#graph tspan:eq(0)")为xAxis标题。我想知道是否有一个本地的高图解决方案做我想做的事情。如果没有,是否有解决方案,我如何添加id或类到Highcharts DOM组件?它会在许多其他情况下帮助我。

对于第三个目标,我一直使用Highchart单击事件。但我的专栏的所有不同部分都是独立考虑的。这就是为什么我想使用与上面相同的技巧。

对于最后一个,我想显示一列的总数,但只显示一次。

有一个我用来工作的图表示例:https://jsfiddle.net/BluePampa/L2b04cfk/

我可以用这些Jquery技巧做我想做的事情,但是我想知道是否有一些合适的方法来做到这一点。我也对任何能帮助我的信息/提示感兴趣。

当xAxis标题悬停时显示工具提示

您可以使用custom-events扩展,它允许捕获xAxis标签上的事件。然后找到一个"具有相同x"的当前点,在一系列/点上循环。下一步是刷新工具提示。

如何显示工具提示的简单演示
chart.tooltip.refresh(chart.series[1].points[2]);

图例元素被选中/取消选中时触发函数

你可以捕捉到legendItemClick。

 plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    alert('action');
                }
            }
        }
    },

在rect html元素上触发点击时的触发函数

我想你的意思是列,如果是,你可以抓住点。事件。点击。

plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        alert('Category: ' + this.category + ', value: ' + this.y);
                    }
                }
            }
        }
    },

每列只显示一个dataLabel

我猜你是指stackLabels,对吗?