如何在选择状态下更改Highmap上的气泡文字颜色？

Question

我可以通过以下选项更改气泡颜色。

plotOptions: {

    mapbubble: {
        marker: {
            fillOpacity: 0.5,
            fillColor: "#222",
            lineColor: '#fff',

            states: {
                select: {
                    fillColor: "#5fdef9",
                    lineColor: '#135c78'
                }
            }
        }
    }
}

但是如何在选择中更改气泡的文字颜色？

Answer 1

当点状态发生变化时，dataLabels不会改变。在状态变为或来自selected状态之后，可以扩展Highcharts以更新每个点的dataLabels选项（例如颜色）。为避免不必要的重绘 - 单击系列后可以调用单个重绘。

JSFiddle：http://jsfiddle.net/bfusb63m/

$(function () {
    (function (H) {
        H.wrap(H.Point.prototype, 'setState', function (proceed) {
            var stateBefore = this.state;
            // Run original proceed method
            proceed.apply(this, [].slice.call(arguments, 1));

            if (stateBefore !== 'select' && this.state === 'select') {
                this.update({
                    dataLabels: {
                        color: 'red'
                    }
                }, false);
            } else if (stateBefore === 'select' && this.state !== 'select') {
                this.update({
                    dataLabels: {
                        color: null
                    }
                }, false);
            }
        });
    }(Highcharts));


    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {

        var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);

        // Correct UK to GB in data
        $.each(data, function () {
            if (this.code === 'UK') {
                this.code = 'GB';
            }
        });

        $('#container').highcharts('Map', {
            plotOptions: {
                mapbubble: {
                    allowPointSelect: true,
                    dataLabels: {
                        enabled: true
                    },
                    marker: {
                        fillOpacity: 0.5,
                        fillColor: "#222",
                        lineColor: '#fff',
                        states: {
                            select: {
                                fillColor: "#5fdef9",
                                lineColor: '#135c78'
                            }
                        }
                    },
                    events: {
                        click: function () {
                            var chart = this.chart;
                            setTimeout(function () {
                                chart.redraw();
                            }, 0);
                        }
                    }
                }
            },
            series: [{
                name: 'Countries',
                mapData: mapData,
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                mapData: mapData,
                name: 'Population 2013',
                joinBy: ['iso-a2', 'code'],
                data: data,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.code}: {point.z} thousands'
                }
            }]
        });

    });
});