javascript - Highcharts donut 为内部和外部饼图提供单独的工具提示

Question

我正在构建一个 Highcharts 圆环图，其中包含两个饼图每个切片的特定数据。工具提示数据在数据的向下钻取部分内传递，并在外环上正确显示。

但是，内部工具提示由主数据变量传递，并显示悬停在其上的最后一个外环的工具提示。

我想指定内部工具提示的数据，如下所示:

data = [{
    y: 44.73,
    color: '#2f7ed8',
    drilldown: {
        name: 'Unknown',
        categories: ['Google', 'Unknown'],
        data: [0.00, 44.73],
        tooltip_data: ['Google tooltip', 'Unknown tooltip']
    }, 
    tooltip_inner: 'Inner Tooltip here'
} ...

我的问题是，我可以选择哪个图形正在悬停(内部或外部)并修改格式化程序返回的工具提示吗？如果我这样做，格式化程序将返回正确的数据:

tooltip: {
    useHTML: true,
    formatter: function() {
        return this.point.tooltip_data;
    }
}

将返回的数据切换到 this.point.tooltip_inner 适用于内部饼图，但当然会忽略外部饼图。我需要能够切换从 tooltip_data(如果是外部)返回的点数据到 tooltip_inner(如果是内部)。

调整每个切片的变量在这里:http://jsfiddle.net/bQqM8/

编辑: fiddle 现在包含工作示例，以防其他人需要这样做。

Answer 1

问题在于创建数据的方式，让我们考虑一下:

        trafficData.push({
            name: categories[i],
            y: data[i].y,
            tooltip_inner: data[i].tooltip_inner,
            color: data[i].color,
            tooltip_data: data[i].tooltip_data // here you are getting tooltip.data
        });

并将其与您的数据进行比较:

data = [{
                y: 33.84,
                color: '#ff0000',
                drilldown: {
                    name: 'Downloads',
                    categories: ['News', 'P2P'],
                    data: [30.36, 3.48],
                    color: '#ff0000',
                    tooltip_data: ['News drilldown data here', 'P2P drilldown data here']
                },
                tooltip_inner: 'Inner Download Tooltip'
            },
 ... 
 { another point } ]

我在点对象中看不到tooltip_data，仅在钻取对象中看到。添加缺少的 tooltip_data 以便其正常工作。