在所有系列类型之间共享工具提示

时间:2016-02-17 14:35:22

标签: javascript highcharts typescript

在Highcharts中使用工具提示我可以看到并非所有类型的系列都包含在同一工具提示中。在我的Highcharts对象的定义中,工具提示的属性如下:

tooltip: {
    positioner : function (boxWidth, boxHeight, point) {
        return {
            x : point.plotX - 100,
            y : point.plotY
        };
    },
    shared : true
}

我如何为每个系列设置tooltip属性:

public getDefaultTooltip() {
    return {
        pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
    };
}

在阅读工具提示的文档后,我可以看到共享属性对于一系列类型&#39; scatter&#39;无效,这对于我来说不起作用的系列类型是什么。那么,是否有一些解决方法可以在同一个共享工具提示中提供所有数据?

在下面的示例中,我想在同一工具提示中显示所有系列数据,但分散系列使用不同的弹出窗口。 http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/

1 个答案:

答案 0 :(得分:3)

ScatterSeries在highcharts中定义,noSharedTooltip = true。我认为这是因为散布系列在工具提示中显示了x和y。

var ScatterSeries = extendClass(Series, {
    type: 'scatter',
    sorted: false,
    requireSorting: false,
    noSharedTooltip: true,
    trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
    takeOrdinalPosition: false, // #2342
    kdDimensions: 2,
    kdComparer: 'distR',
    drawGraph: function () {
        if (this.options.lineWidth) {
            Series.prototype.drawGraph.call(this);
        }
    }
});

要解决此问题,您可以使用线系列而不是散布系列,并且lineWidth = 0.您还需要关闭系列的悬停状态,以避免在悬停时显示该线。

  , {
        type: 'line',
        name: 'Average',
        lineWidth: 0,
        states: {
            hover: {
            enabled: false
          }
        },
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }

http://jsfiddle.net/a6c4c4tv/2/