Highcharts，如何更改具有多列（类别）的系列的悬停背景颜色答案

【问题标题】：Highcharts, how to change hover bg color for series with multiple columns (categories)Highcharts，如何更改具有多列（类别）的系列的悬停背景颜色
【发布时间】：2015-06-11 12:09:38
【问题描述】：

在 highcharts 中，系列中的所有列都有背景颜色。在所有主题中，悬停颜色都是浅蓝色（155、200、255、.2）。

我在这里加载了一个示例：http://jsfiddle.net/38pvL4cb/

在源码中可以看到Highcharts正在创建如下路径：

<path fill="none" d="M 678.5 49 L 678.5 326" stroke="rgba(155,200,255,0.2)" stroke-width="274.25" zIndex="2" visibility="hidden"></path>

此元素会根据您悬停的位置动态移动和显示。我试图在主题中弄清楚如何更改它的颜色，但在API reference 中找不到它。

【问题讨论】：

标签： javascript css highcharts

【解决方案1】：

设置xAxis.crosshair.color 选项：http://jsfiddle.net/38pvL4cb/5/

xAxis: {
    gridLineColor: '#707073',
    labels: {
        style: {
            color: '#fff'
        }
    },
    crosshair: {
        color: "red" // color
    },
    lineColor: '#707073',
    minorGridLineColor: '#505053',
    tickColor: '#707073',
    title: {
        style: {
            color: '#777'

        }
    }
},

API 中还没有该选项。

【讨论】：

谢谢！我一直在努力寻找控制它的选项 - 似乎它会被称为类别系列的“背景颜色”，因为它突出显示了背景。
很高兴听到它有帮助！为此，Crosshair 始终使用 color。我认为不要仅仅因为十字准线的大小改变而引入另一个选项是个好主意吗？请参阅：jsfiddle.net/BlackLabel/31toj2aL - 将固定宽度设置为 2px，如果使用另一种选项，会混淆使用哪个选项。另外，十字准线只有 6 个选项，请查看 API。

【解决方案2】：

像这样添加一些针对描边颜色的 CSS：

.highcharts-container path
{
    stroke: rgba(100,100,100,.5);
}

Fiddle

【讨论】：

问题是 Highcharts 使用路径的不仅仅是这个元素，所以对路径进行一般地址会导致其他图表出现问题。我在下面的 jsfiddle 中添加了第二个图表，它演示了仅解决所有路径的问题。这个唯一的悬停路径没有id，因此不能直接调用。
您可能需要编辑 highcharts.js 文件。查找：(e?"rgba(155,200,255,0.2)":"#C0C0C0")