Question

我正在尝试使用Highcharts显示自定义工具提示。您可以在此处找到代码的示例： http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

将鼠标悬停在图表上时，可以看到工具提示仅包含系列2中的值，但不包含系列1中的值（不可见）。单击图例中的“系列1”时，可以在工具提示中看到系列1中的值。

编辑：没有code提交，只需修复linkrot /遵守编辑规则...
有没有办法在工具提示中显示隐形序列中的值？

Answer 1

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        var chart = this.points[0].series.chart; //get the chart object
        var categories = chart.xAxis[0].categories; //get the categories array
        var index = 0;
        while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays           
        $.each(chart.series, function(i, series) { //loop through series array
            s += '<br/>'+ series.name +': ' +
                series.data[index].y +'m';     //use index to get the y value
        });           
        return s;
    },
    shared: true
}

Answer 2

工具提示格式化程序是一个类似于任何其他函数的函数，因此如果您只是使数据可用，它可以返回一个包含所有系列值的字符串。在这个example中，我将系列数组和类别移动到单独的变量中，工具提示格式化程序使用索引到这些数组中来查找值。

formatter: function() {
    var index = $.inArray(this.x, categories);
    var s = '<b>'+ this.x +'</b>';

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index];
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index];

    return s;
}

Answer 3

另一种方法是使系列的某些属性不可见，而不是整个系列本身。这样您就可以在工具提示和图例中看到它。

这就是我的所作所为：

首先，我将隐形系列的线条颜色设置为＆＃34;透明。＆＃34;
接下来，我将隐形系列标记的填充颜色设置为＆＃34;透明。＆＃34;
最后，我禁用了标记的悬停状态。当您将鼠标光标移动到可见系列中的每个点上时，这可以防止出现阴影高光圆圈。

以下是您原始小提琴的修改版本：http://jsfiddle.net/brightmatrix/fDNh9/184/

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    lineColor: 'transparent',       // make the line invisible
    marker: { 
        fillColor: 'transparent',   // make the line markers invisible
        states: {
            hover: {
                enabled: false      // prevent the highlight circle on hover
            }
        }
    }
}, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]

需要注意的两件事：

我已将属性enableMouseTracking: false与其他不可见系列一起使用，以防止用户与其进行交互（以实现视觉效果）。如果您为隐形序列设置此项，则会阻止系列数据显示在您的工具提示中。
如果您希望隐私系列不会出现在图例中，可以添加属性showInLegend: false。其数据仍将显示在工具提示中。

我希望这有助于其他遇到此问题的人。

Answer 4

答案太迟了，但这就是我的所作所为。绘制图表并使颜色透明。在相反的y轴上绘制它并将max设置为零。将alignTicks设置为false。这样的事情。

chart: {
        alignTicks: false,
        type: 'line'
    },

然后唯一需要的是更改工具提示格式化程序中的颜色值，因为标签将是透明的。

希望这有助于某人。

快乐学习：）

在Highcharts中显示隐形序列的工具提示

4 个答案: