javascript - Highcharts - 更改系列中单个数据点的边框

Question

我正在使用 highcharts 来准备一些图表。我希望能够更改系列中特定点的边框颜色，但我无法让它工作(jsfiddle: http://jsfiddle.net/081e9sLy/4/ )

我将我的系列声明为

var subject1 = [20,22,24,28,24, { marker: {
                                    fillColor: 'green',
                                    lineWidth: 3,
                                    lineColor: "#f39c12"
                                 }, y:29}];

但第六个数据点上没有橙色边框。但是，如果我将 fillColor 更改为“红色”，则会更改数据点。

有什么建议吗？

编辑:经过进一步调查，当您将鼠标悬停在数据点上时，边界似乎是可见的(只是!)。但我需要它始终可见。

Answer 1

这似乎是一个错误。当在点的标记选项中定义 lineWidth 时，不会考虑 lineWidth。它在版本 4.2.7 http://jsfiddle.net/081e9sLy/7/ 中工作

如果您想在版本 5 中使用它，您可以尝试使用以下代码覆盖 Highcharts 方法。

Highcharts.seriesTypes.line.prototype.pointAttribs = function (point, state) {
var seriesMarkerOptions = this.options.marker,
                    seriesStateOptions,
                    pointOptions = point && point.options,
                    pointMarkerOptions = (pointOptions && pointOptions.marker) || {},
                    pointStateOptions,
                    strokeWidth = pointMarkerOptions.lineWidth || seriesMarkerOptions.lineWidth,
                    color = this.color,
                    pointColorOption = pointOptions && pointOptions.color,
                    pointColor = point && point.color,
                    zoneColor,
                    fill,
                    stroke,
                    zone;

                if (point && this.zones.length) {
                    zone = point.getZone();
                    if (zone && zone.color) {
                        zoneColor = zone.color;
                    }
                }

                color = pointColorOption || zoneColor || pointColor || color;
                fill = pointMarkerOptions.fillColor || seriesMarkerOptions.fillColor || color;
                stroke = pointMarkerOptions.lineColor || seriesMarkerOptions.lineColor || color;

                // Handle hover and select states
                if (state) {
                    seriesStateOptions = seriesMarkerOptions.states[state];
                    pointStateOptions = (pointMarkerOptions.states && pointMarkerOptions.states[state]) || {};
                    strokeWidth = pointStateOptions.lineWidth || seriesStateOptions.lineWidth || strokeWidth + seriesStateOptions.lineWidthPlus;
                    fill = pointStateOptions.fillColor || seriesStateOptions.fillColor || fill;
                    stroke = pointStateOptions.lineColor || seriesStateOptions.lineColor || stroke;
                }

                return {
                    'stroke': stroke,
                    'stroke-width': strokeWidth,
                    'fill': fill
                };

};

示例:http://jsfiddle.net/081e9sLy/9/