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更改为＆＃34; red＆＃34;，那确实会更改数据点。

有什么建议吗？

编辑：经过进一步调查后，当鼠标悬停在数据点上时，边框似乎是可见的（只是！）。但我总是需要它可见。

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/

Highcharts - 更改单个数据点的边界

1 个答案: