如何在Highcharts或其他图表库中实现如图所示的最值（Min&Max）图表

根据参考图的视觉需求，这里给出两种适配的实现方案，直接基于Highcharts完成：

方案1：分组柱状图（直观对比Min/Max） #

适合需要清晰对比每个类别下Min和Max数值的场景，代码示例如下：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '各项目最小值与最大值对比'
    },
    xAxis: {
        categories: ['项目A', '项目B', '项目C', '项目D'],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Min',
        data: [49.9, 71.5, 106.4, 129.2],
        color: '#2f7ed8'
    }, {
        name: 'Max',
        data: [83.6, 78.8, 98.5, 121.4],
        color: '#ff4500'
    }]
});

方案2：散点+折线连接（突出区间范围） #

如果需要强调每个类别下Min到Max的数值区间，用散点标记Min/Max，并用折线连接两个点，更贴合参考图的视觉效果：

Highcharts.chart('container', {
    chart: {
        type: 'scatter'
    },
    title: {
        text: '各项目数值区间（Min-Max）'
    },
    xAxis: {
        categories: ['项目A', '项目B', '项目C', '项目D'],
        title: {
            text: '项目'
        }
    },
    yAxis: {
        title: {
            text: '数值'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' +
                this.x + ': ' + this.y;
        }
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            }
        },
        line: {
            enableMouseTracking: false,
            color: '#999'
        }
    },
    series: [{
        name: 'Min',
        data: [49.9, 71.5, 106.4, 129.2],
        color: '#2f7ed8'
    }, {
        name: 'Max',
        data: [83.6, 78.8, 98.5, 121.4],
        color: '#ff4500'
    }, {
        name: '区间线',
        type: 'line',
        data: [
            ['项目A', 49.9], ['项目A', 83.6],
            ['项目B', 71.5], ['项目B', 78.8],
            ['项目C', 106.4], ['项目C', 98.5],
            ['项目D', 129.2], ['项目D', 121.4]
        ],
        connectNulls: false,
        step: false
    }]
});

额外优化建议 #

• 可通过legend配置调整图例位置，优化图表布局；
• 若需要显示数值标签，在plotOptions中开启dataLabels即可；
• 动态数据场景下，直接将series中的data替换为接口返回的数组即可。

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