如何在Bootstrap行中对齐动态加载的Highcharts solidgauge图表

问题背景 #

我使用Highcharts的solidgauge图表类型做数据展示，当前是动态生成图表，但无法实现水平对齐，想要用Bootstrap布局实现一行显示3个图表的效果。

现有代码 #

JavaScript代码

function getChartOptions(data) {
    debugger;
    var rawData = data;
    var chartData = getData(rawData);

    function getData(rawData) {
        var data = [],
            start = Math.round(Math.floor(rawData / 10) * 10);
        data.push(rawData);
        for (i = start; i > 0; i -= 10) {
            data.push({
                y: i
            });
        }
        return data;
    }
    var options = {
        chart: {
            type: 'solidgauge',
            height: 250
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        pane: {
            startAngle: -120,
            endAngle: 120,
            background: [{ // Track for Move
                outerRadius: '100%',
                innerRadius: '80%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0,
                shape: 'arc'
            }],
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 2,
            lineColor: 'white',
            tickInterval: 10,
            labels: {
                enabled: false
            },
            minorTickWidth: 0,
            tickLength: 50,
            tickWidth: 5,
            tickColor: 'white',
            zIndex: 6,
            stops: [
                [0, '#f06'],
                [0.101, '#f03'],
                [0.201, '#e10'],
                [0.301, '#c30'],
                [0.401, '#a50'],
                [0.501, '#870'],
                [0.601, '#690'],
                [0.701, '#4b0'],
                [0.801, '#2d0'],
                [0.901, '#0f0'],
                [1, '#fff']
            ]
        },
        series: [{
            data: chartData,
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:12px">{y}%</span><br/>',
                borderWidth: 0,
                y: -20
            },
            tooltip: {
                enabled: false
            },
            borderWidth: 0,
            color: Highcharts.getOptions().colors[0],
            radius: '100%',
            innerRadius: '80%',
        }]
    };
    return options;
}

$(function () {
    debugger;
    // Define your data sets here
    var dataSet1 = [20];
    var dataSet2 = [10];
    var dataSet3 = [5];

    // Define an array of data sets
    var dataSets = [dataSet1, dataSet2, dataSet3];

    // Iterate over the data sets and create a new chart for each one
    for (var i = 0; i < dataSets.length; i++) {
        // Create a new container element for the chart
        var $chartContainer = $('<div>').appendTo('#chart-container');

        // Get the chart options for this data set
        var chartOptions = getChartOptions(dataSets[i]);

        // Create the chart using Highcharts
        Highcharts.chart($chartContainer[0], chartOptions);
    }
});

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="chart-container"></div>

解决方案 #

要实现Bootstrap布局下一行显示3个图表，核心是利用Bootstrap的栅格系统，同时修复原代码中的数据处理bug，具体步骤如下：

1. 引入Bootstrap CSS

在HTML头部添加Bootstrap样式文件，确保栅格系统生效：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

2. 修改父容器为Bootstrap行

将原#chart-container的class设置为row，作为栅格系统的行容器，同时用g-3设置列间距：

<div id="chart-container" class="row g-3"></div>

3. 修改动态生成的图表容器

在JS中创建图表容器时，添加col-md-4类（中等屏幕及以上每行3个，小屏幕自动堆叠），同时添加text-center让图表居中：

var $chartContainer = $('<div class="col-md-4 text-center">').appendTo('#chart-container');

4. 修复数据处理bug

原代码中getData函数直接使用数组rawData进行计算，会导致NaN错误，需要取数组的第一个元素：

function getData(rawData) {
    var data = [],
        // 修正：取数组第一个元素进行计算
        start = Math.round(Math.floor(rawData[0] / 10) * 10);
    // 修正：将数值推入数组，而非数组本身
    data.push(rawData[0]);
    for (i = start; i > 0; i -= 10) {
        data.push({
            y: i
        });
    }
    return data;
}

修改后的完整代码 #

HTML代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="chart-container" class="row g-3"></div>

JavaScript代码

function getChartOptions(data) {
    var rawData = data;
    var chartData = getData(rawData);

    function getData(rawData) {
        var data = [],
            start = Math.round(Math.floor(rawData[0] / 10) * 10);
        data.push(rawData[0]);
        for (i = start; i > 0; i -= 10) {
            data.push({
                y: i
            });
        }
        return data;
    }
    var options = {
        chart: {
            type: 'solidgauge',
            height: 250
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        pane: {
            startAngle: -120,
            endAngle: 120,
            background: [{
                outerRadius: '100%',
                innerRadius: '80%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0,
                shape: 'arc'
            }],
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 2,
            lineColor: 'white',
            tickInterval: 10,
            labels: {
                enabled: false
            },
            minorTickWidth: 0,
            tickLength: 50,
            tickWidth: 5,
            tickColor: 'white',
            zIndex: 6,
            stops: [
                [0, '#f06'],
                [0.101, '#f03'],
                [0.201, '#e10'],
                [0.301, '#c30'],
                [0.401, '#a50'],
                [0.501, '#870'],
                [0.601, '#690'],
                [0.701, '#4b0'],
                [0.801, '#2d0'],
                [0.901, '#0f0'],
                [1, '#fff']
            ]
        },
        series: [{
            data: chartData,
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:12px">{y}%</span><br/>',
                borderWidth: 0,
                y: -20
            },
            tooltip: {
                enabled: false
            },
            borderWidth: 0,
            color: Highcharts.getOptions().colors[0],
            radius: '100%',
            innerRadius: '80%',
        }]
    };
    return options;
}

$(function () {
    var dataSet1 = [20];
    var dataSet2 = [10];
    var dataSet3 = [5];
    var dataSets = [dataSet1, dataSet2, dataSet3];

    for (var i = 0; i < dataSets.length; i++) {
        var $chartContainer = $('<div class="col-md-4 text-center">').appendTo('#chart-container');
        var chartOptions = getChartOptions(dataSets[i]);
        Highcharts.chart($chartContainer[0], chartOptions);
    }
});

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