Highcharts - 改变悬停点的颜色

So, I've bene looking at the highcharts API, for an option to change the color of the point background color, when hovering the chart.

因此,当我将鼠标悬停在图表上时,我会看到highcharts API,以便选择更改点背景颜色的颜色。

This is my current chart: JSFiddle Example

这是我目前的图表:JSFiddle示例

And the code:

和代码:

$(function () {
            $('#main-chart').highcharts({
                chart: {
                    type: 'area'
                },
                plotBorderColor: '#000000',
                plotBackgroundColor: '#000000',
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    allowDecimals: false,
                    labels: {
                        formatter: function () {
                            return this.value; // clean, unformatted number for year
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Number of Clicks'
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
                    pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
                },
                plotOptions: {
                    area: {
                        pointStart: 1940,
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'USA',
                    lineColor: '#4adefa',
                    color: '#f1faf7',
                    data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]


                }, {
                    name: 'USSR/Russia',
                    lineColor: '#44d99f',
                    color: '#f1faf7',
                    data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
                }]
            });
        });

When hovering the chart, the "point marker" is a round gray circle - I want to change that to be a round circle with a white background and green border.

当悬停图表时,“点标记”是一个圆形的灰色圆圈 - 我想将其更改为具有白色背景和绿色边框的圆形圆圈。

Is this possible?

这可能吗?

3 个解决方案

#1

You can add this to your plotOptions if you want the style of the points to be the same for every series.

如果您希望每个系列的点的样式相同,则可以将其添加到plotOptions中。

              marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                fillColor: 'white',
                                lineColor: 'green',
                                lineWidth: 0
                            }
                        }
                    }

A working fiddle can be found here: http://jsfiddle.net/gwdufurk/3/

可以在这里找到一个工作小提琴:http://jsfiddle.net/gwdufurk/3/

If you want to have the styles of the points to be different for each series you can set the marker.states.hover attributes for each series like so:

如果您希望每个系列的点的样式不同,您可以为每个系列设置marker.states.hover属性,如下所示:

 series: [{
                name: 'USA',
                lineColor: '#4adefa',
                color: '#f1faf7',
                marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                fillColor: 'white',
                                lineColor: 'green',
                                lineWidth: 0
                            }
                        }
                    },
                data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
               // other series here.

            }

See fiddle here http://jsfiddle.net/gwdufurk/4/.

请看这里的小提琴http://jsfiddle.net/gwdufurk/4/。

#2

You can change the color of the markers like so:

您可以更改标记的颜色,如下所示:

...  
marker: {
    fillColor: 'green',
    ...

Edit: Fiddle with red markers

编辑:摆弄红色标记

#3

Different Marker Color for Hover Pointer,

悬停指针的不同标记颜色,

 data: [
                         { name: 'Point 1',color: '#4adefa', y: 251 }, 
                        { name: 'Point 2',color: '#000000', y: 122 },
                        { name: 'Point 3',color: '#A25429', y: 511 },
                        { name: 'Point 4',color: '#AA1111', y: 524 },
                        { name: 'Point 5',color: '#DF2500', y: 291 },
                        { name: 'Point 6',color: '#007ACF', y: 342 },
                        { name: 'Point 7',color: '#ECD66E', y: 110 },

                       ]

See fiddle here:http://jsfiddle.net/UI_Designer/gwdufurk/5/

请看这里的小提琴:http://jsfiddle.net/UI_Designer/gwdufurk/5/

#1