如何在Highcharts高级无障碍图表中统一设置系列颜色为绿色并为极小数据点配置最小宽度与形状

我来帮你搞定这两个Highcharts的需求，咱们一步步来：

想要所有系列都用绿色，不用挨个给每个series加color属性，直接在全局的plotOptions里给series设置默认颜色就可以了，这样不管是自定义的lowmedhigh系列还是scatter系列，都会自动继承这个颜色：

plotOptions: {
    series: {
        stickyTracking: true,
        whiskerWidth: 5,
        color: '#2ecc71' // 修改：统一设置所有系列为绿色，你也可以用'green'/'lime'等其他绿色值
    }
},

如果之后有个别系列需要特殊颜色，再单独给那个series加color属性覆盖就行，现在这样就能实现全局统一绿色了。

核心思路是计算每个数据点的时间跨度（high值 - low值），如果跨度小于我们设定的阈值（比如1天的毫秒数：86400000），就强制给它设置最小宽度，甚至修改形状让它更容易被识别。咱们分两种系列处理：

1. 自定义lowmedhigh系列的处理 #

在你自定义的drawPoints方法里，添加时间差判断，当跨度极小时，调整宽度和绘制的路径：

drawPoints: function () {
    var series = this;
    // 修改：设定最小时间跨度阈值（这里设为1天，可根据需求调整）
    var minTimeDiff = 86400000; 
    this.points.forEach(function (point) {
        var graphic = point.graphic,
            verb = graphic ? 'animate' : 'attr',
            shapeArgs = point.shapeArgs,
            // 修改：计算当前数据点的时间跨度
            timeDiff = point.high - point.low,
            // 修改：如果跨度小于阈值，设置最小宽度，否则用默认宽度
            width = timeDiff < minTimeDiff ? 20 : 0, 
            left = Math.floor(shapeArgs.x) + 0.5,
            right = left + width,
            crispX = left + Math.round(width / 2) + 0.5,
            highPlot = Math.floor(point.highPlot) + 0.5,
            lowPlot = Math.floor(point.lowPlot) + 0.5 - (point.low === 0 ? 1 : 0);

        if (point.isNull) {
            return;
        }

        if (!graphic) {
            point.graphic = graphic = series.chart.renderer
                .path('point')
                .add(series.group);
        }

        graphic.attr({
            stroke: point.color || series.color,
            "stroke-width": 4
        });

        // 修改：如果是极小数据点，绘制一个更显眼的形状（比如小矩形+十字线）
        var pathD;
        if (timeDiff < minTimeDiff) {
            pathD = [
                'M', left, highPlot,
                'L', right, highPlot,
                'L', right, lowPlot,
                'L', left, lowPlot,
                'Z', // 闭合矩形
                'M', crispX, highPlot,
                'V', lowPlot,
                'M', left, (highPlot + lowPlot)/2,
                'H', right
            ];
        } else {
            pathD = [
                'M', left, highPlot,
                'H', right,
                'M', left, lowPlot,
                'H', right,
                'M', crispX, highPlot,
                'V', lowPlot
            ];
        }

        graphic[verb]({
            d: pathD
        });
    });
}

2. scatter系列的处理 #

对于scatter系列，我们可以通过point.init事件动态修改标记的大小和形状，当数据点跨度极小时，放大标记并更换更显眼的形状：

plotOptions: {
    series: {
        stickyTracking: true,
        whiskerWidth: 5,
        color: '#2ecc71' // 统一绿色
    },
    // 修改：添加scatter系列的特殊处理
    scatter: {
        marker: {
            symbol: 'diamond',
            radius: 5
        },
        point: {
            events: {
                init: function() {
                    var minTimeDiff = 86400000;
                    var timeDiff = this.options.high - this.options.low;
                    if (timeDiff < minTimeDiff) {
                        this.markerSymbol = 'circle'; // 换成圆形更显眼
                        this.markerRadius = 8; // 放大标记尺寸
                    }
                }
            }
        }
    }
},

把上面的修改整合后，完整代码如下：

function DrawRemoteRequestPSRChart(seriesData, yAxisCategories) { 
    // Define custom series type for displaying low/med/high values using boxplot as a base 
    Highcharts.seriesType('lowmedhigh', 'boxplot', { 
        keys: ['low', 'high'], 
        tooltip: { } 
    }, { 
        // Change point shape to a line with three crossing lines for low/median/high 
        // Stroke width is hardcoded to 1 for simplicity 
        drawPoints: function () { 
            var series = this;
            // 设定最小时间跨度阈值（1天，可调整）
            var minTimeDiff = 86400000; 
            this.points.forEach(function (point) { 
                var graphic = point.graphic, 
                    verb = graphic ? 'animate' : 'attr', 
                    shapeArgs = point.shapeArgs, 
                    // 计算时间跨度，判断是否为极小数据点
                    timeDiff = point.high - point.low,
                    width = timeDiff < minTimeDiff ? 20 : 0, 
                    left = Math.floor(shapeArgs.x) + 0.5, 
                    right = left + width, 
                    crispX = left + Math.round(width / 2) + 0.5, 
                    highPlot = Math.floor(point.highPlot) + 0.5, 
                    // Sneakily draw low marker even if 0 
                    lowPlot = Math.floor(point.lowPlot) + 0.5 - (point.low === 0 ? 1 : 0); 

                if (point.isNull) { 
                    return; 
                } 

                if (!graphic) { 
                    point.graphic = graphic = series.chart.renderer 
                        .path('point') 
                        .add(series.group); 
                } 

                graphic.attr({ 
                    stroke: point.color || series.color, 
                    "stroke-width": 4 
                }); 

                // 根据是否为极小数据点，绘制不同的形状
                var pathD;
                if (timeDiff < minTimeDiff) {
                    pathD = [
                        'M', left, highPlot,
                        'L', right, highPlot,
                        'L', right, lowPlot,
                        'L', left, lowPlot,
                        'Z',
                        'M', crispX, highPlot,
                        'V', lowPlot,
                        'M', left, (highPlot + lowPlot)/2,
                        'H', right
                    ];
                } else {
                    pathD = [
                        'M', left, highPlot,
                        'H', right,
                        'M', left, lowPlot,
                        'H', right,
                        'M', crispX, highPlot,
                        'V', lowPlot
                    ];
                }

                graphic[verb]({ 
                    d: pathD 
                }); 
            }); 
        } 
    }); 

    // Create chart 
    var chart = Highcharts.chart('container', { 
        chart: { 
            type: 'lowmedhigh', 
            inverted: true 
        }, 
        credits: { 
            enabled: false 
        }, 
        legend: { 
            enabled: false 
        }, 
        title: { 
            text: 'Daily company fruit consumption 2019' 
        }, 
        tooltip: { 
            shared: false, 
            formatter: function () { 
                return this.point.category + ', ' + new Date(this.point.options.low).toGMTString() + ' to ' + new Date(this.point.options.high).toGMTString() + '.'; 
            } 
        }, 
        accessibility: { 
            point: { 
                descriptionFormatter: function (point) { 
                    var ix = point.index + 1, 
                        category = point.category, 
                        from = new Date(point.low), 
                        to = new Date(point.high); 
                    return ix + '. ' + category + ', ' + from.toDateString() + ' to ' + to.toDateString() + '.'; 
                } 
            }, 
            typeDescription: 'Low, high. Each data point has a low and high value, depicted vertically as small ticks.' 
            // Describe the chart type to screen reader users, since this is not a traditional boxplot chart 
        }, 
        xAxis: [{ 
            accessibility: { 
                description: 'Months of the year' 
            }, 
            categories: ['January', 'February'], 
            crosshair: true 
        }], 
        yAxis: { 
            type: 'datetime' 
        }, 
        responsive: { 
            rules: [{ 
                condition: { 
                    minWidth: 550 
                }, 
                chartOptions: { 
                    xAxis: { 
                        categories: ['Jan', 'Feb'] 
                    } 
                } 
            }] 
        }, 
        plotOptions: { 
            series: { 
                stickyTracking: true, 
                whiskerWidth: 5,
                color: '#2ecc71' // 统一所有系列为绿色
            },
            scatter: {
                marker: {
                    symbol: 'diamond',
                    radius: 5
                },
                point: {
                    events: {
                        init: function() {
                            var minTimeDiff = 86400000;
                            var timeDiff = this.options.high - this.options.low;
                            if (timeDiff < minTimeDiff) {
                                this.markerSymbol = 'circle';
                                this.markerRadius = 8;
                            }
                        }
                    }
                }
            }
        }, 
        series: [{ 
            name: 'Plums', 
            data: [ 
                [1416528000000, 1417478400000 ], 
                [ Date.UTC(2014, 10, 1, 10, 16, 58), Date.UTC(2014, 12, 2, 10, 16, 58) ]
            ] 
        }, { 
            name: 'Bananas', 
            data: [ 
                [Date.UTC(2014, 10, 21, 10, 16, 58), Date.UTC(2014, 11, 22, 10, 16, 58) ], 
                [ Date.UTC(2014, 10, 15, 10, 16, 58), Date.UTC(2014, 12, 12, 10, 16, 58) ] 
            ] 
        }, { 
            name: 'Apples', 
            type: 'scatter', 
            data: [ 
                [Date.UTC(2014, 10, 20, 10, 16, 58), Date.UTC(2014, 11, 27, 10, 16, 58) ], 
                [ Date.UTC(2014, 10, 24, 10, 16, 58), Date.UTC(2014, 10, 24, 12, 17, 58) ] 
            ] 
        }] 
    }); 

    // Remove click events on container to avoid having "clickable" announced by AT 
    // These events are needed for custom click events, drag to zoom, and navigator 
    // support. 
    chart.container.onmousedown = null; 
    chart.container.onclick = null; 

    //Highcharts.chart('GraphHere', { 
    //    chart: { 
    //        type: 'xrange' 
    //    }, 
    //    credits: { 
    //        enabled: false 
    //    }, 
    //    legend: { 
    //        enabled: false 
    //    }, 
    //    tooltip: { 
    //        pointFormat: '' 
    //    }, 
    //    title: { 
    //        text: 'Mass Remote Request PSR' 
    //    }, 
    //    xAxis: { 
    //        type: 'datetime' 
    //    }, 
    //    yAxis: { 
    //        title: { 
    //            text: '' 
    //        }, 
    //        categories: yAxisCategories, 
    //        min: 0, 
    //        max: 5, 
    //        scrollbar: { 
    //            enabled: true 
    //        }, 
    //        reversed: true 
    //    }, 
    //    series: seriesData 
    //}); 
}

你可以根据实际需求调整minTimeDiff的阈值（比如改成几小时的毫秒数），还有最小宽度20以及形状样式，完全可以自定义成你想要的样子。

内容的提问来源于stack exchange，提问作者Vinay Kumar