highcharts 如何在引导行中对齐动态加载的高位图表

q3aa0525  于 2023-04-06  发布在  Highcharts
关注(0)|答案(1)|浏览(155)

我使用HighCharts进行图表显示。我使用图表类型solidgauge。我正在加载动态图表,我想水平对齐这些图表。
基本上,我想对齐图表,如下图所示。

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: {
                //
            },
            tooltip: {
                enabled: false
                /*valueSuffix: ' km/h'*/
            },
            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']
                ]
            },
            // other options, including series data, go here
            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
                    /*valueSuffix: ' km/h'*/
                },
                borderWidth: 0,
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '80%',
            }]
        };
        return options;
    }

    /*debugger;*/
    $(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);

            
        }
    });
<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>

我想在引导行中显示图表。如图所示,一行中只有3个图表。请帮助我对齐这些动态图表。

相关问题