Highcharts - 改变悬停点的颜色答案

【问题标题】：Highcharts - Change color of hover pointsHighcharts - 改变悬停点的颜色
【发布时间】：2015-02-14 11:54:41
【问题描述】：

所以，我一直在查看 highcharts API，以获取在悬停图表时更改点背景颜色的选项。

这是我目前的图表：JSFiddle Example

还有代码：

$(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]
                }]
            });
        });

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

这可能吗？

【问题讨论】：

请发布主题对象。

标签： javascript jquery html css highcharts

【解决方案1】：

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

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

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

如果您想让每个系列的点样式不同，您可以为每个系列设置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.

            }

在这里查看小提琴http://jsfiddle.net/gwdufurk/4/。

【讨论】：

【解决方案2】：

您可以像这样更改标记的颜色：

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

编辑：Fiddle with red markers

【讨论】：

可以为每个系列设置不同的标记颜色吗？
是的，将标记配置放入每个系列中，如下所示：... series: [{ name: 'USA', marker: { fillColor: '#f00' }, ...

【解决方案3】：

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

 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 },

                       ]

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

【讨论】：