时间戳

首页 > 解决方案 > 如何从代码中在迷你图中显示工具提示

javascript - 如何从代码中在迷你图中显示工具提示

问题描述

我正在尝试创建一个仪表板页面，如果用户单击图表中的一个点，那么在一个点中具有该唯一标识符的所有图表都应该能够显示工具提示。这适用于除迷你图之外的所有图表。下面的现场演示显示了默认的 highcharts 迷你图演示，但我的只有一个点（带一个点的条形图）。错误仍然相同：

未捕获的类型错误：无法在 a.Tooltip.refresh 读取未定义的属性“tooltipOptions”（highcharts.src.js:22676）

我用来显示/隐藏工具提示的代码是：

function chartPointClick(pointidx) {
    var chartArray = Highcharts.charts;
    for (var i = 0; i < chartArray.length; i++) {
        var thechart = Highcharts.charts[i];
        var theData = thechart.series[0].data;

        if (thechart.renderTo.tagName == 'TD') {
            var theSeries = thechart.series[0]
                console.log(theSeries);
                thechart.tooltip.refresh(theSeries.options.data[0]);
        }
        thechart.redraw();
    }
}

这是通过 plotOptions.series.events 方法调用的：

events: {
        click: function (event) {
            chartPointClick(event.point.idx);
        }
}

如何激活迷你图工具提示？

现场演示。

编辑 -使用不起作用的单个条形图进行实时演示。

标签： javascripthighcharts

解决方案

tooltiprefresh方法仅接受第一个参数作为点数组：

    if (thechart.renderTo.tagName == 'TD') {
        var theSeries = thechart.series[0]
        thechart.tooltip.refresh([theSeries.points[0]]);
    }

下一个问题是outside工具提示的选项，这会导致另一个错误。我建议您使用：

td,
th {
    ...
    overflow: visible !important;
}

现场演示：https ://jsfiddle.net/BlackLabel/qx31oa7m/

API：https ://api.highcharts.com/highcharts/tooltip.outside

推荐阅读