Highcharts在悬停时填充气泡

时间:2015-02-17 23:32:36

标签: javascript highcharts

我正在使用Highcharts.js制作组合图表。

它由一条线和两个系列的气泡组成 - 一个表示正面变化,另一个表示负面。

我的代码如下:

$('#container').highcharts({
                exporting: {
                    enabled: false
                },
                title: false,
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                },
                yAxis: {
                    title: false,
                    labels: {
                        enabled: false,
                    },
                    gridLineWidth: 0
                },
                tooltip: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer'
                    },
                    bubble: {
                        minSize: 50,
                        maxSize: 80
                    }
                },
                series: [{
                    name: 'Line',
                    data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}],
                    showInLegend: false,
                    marker: {radius: 18},
                    states: {
                        hover: {
                            enabled: false,
                        }
                    }
                }, {
                    name: 'Positive',
                    dataLabels: {
                        enabled: true,
                        x:0,
                        formatter:function() {
                            return this.point.z;
                        },
                        style:{color:"black",fontSize:"16px",textShadow:"0px"}
                    },
                    type: 'bubble',
                    color: '#0BBF23',
                    data: [{"x":2,"y":9.5,"z":2.6},{"x":3,"y":14.5,"z":5},{"x":4,"y":18.2,"z":3.7},{"x":5,"y":21.5,"z":3.3},{"x":6,"y":25.2,"z":3.7},{"x":7,"y":26.5,"z":1.3}],
                }, {
                    name: 'Negative',
                    type: 'bubble',
                    color: '#BF0B23',
                    data: [[1,6.9,0.1],[8,23.3,3.2],[9,18.3,5],[10,13.9,4.4],[11,9.6,4.3]],
                    dataLabels: {
                        enabled: true,
                        x:0,
                        formatter:function() {
                            return this.point.z;
                        },
                        style:{color:"black",fontSize:"16px",textShadow:"0px"}
                    },
                    states: {
                        hover: {
                            halo: {
                                size: 1,
                                attributes: {
                                    zIndex: 9000
                                },
                                opacity: 1
                            }
                        }
                    },
                }, {
                    type: 'column',
                    pointWidth: 1,
                    borderWidth: 0,
                    showInLegend: false,
                    data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}]                }]
            });

正如您所看到的,我正在使用" halo"当它在徘徊时,试图填补负面系列的泡沫。理想情况下,我也希望增加气泡大小和字体,但我不知道如何实现它。

有没有人知道如何在悬停时使用纯色填充标记,增加半径并增加字体大小?

在这里小提琴:http://jsfiddle.net/18qa8rds/1/

值得注意的是,在我的本地版本中,线条图通过光环显示,但它并不在小提琴上。

0 个答案:

没有答案