根据图表大小对齐副标题和标题

Question

我正在使用 highcharts 的'solidgauge'。 我改变了窗格的位置和大小，但我的标题和字幕位置没有改变。

我想要他们的位置，如上图所示的红色箭头所示。

 $(function () {

            var rawData = 90,
                data = 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 highCtr = document.getElementById('container');
            /*var smp = $("#highCtr")[0].getContext('2d');*/
            Highcharts.chart(highCtr, {
                chart: {
                    type: 'solidgauge',
                    marginTop: 10,
                    height: 200,
                    events: {
                        render: function () {
                            debugger;
                            var chart = this,
                                renderer = chart.renderer,
                                subtitle = chart.subtitle,
                                subtitleBBox = subtitle.getBBox(),
                                subtitleX = subtitleBBox.x,
                                subtitleY = subtitleBBox.y;

                            renderer.text('Subtitle X: ' + subtitleX, subtitleX, subtitleY - 20)
                                .attr({
                                    align: 'left'
                                })
                                .add();
                            renderer.text('Subtitle Y: ' + subtitleY, subtitleX, subtitleY - 5)
                                .attr({
                                    align: 'left'
                                })
                                .add();
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: 'Level 1'
                },

                subtitle: {
                    text: rawData +'%',
                    style: {
                        'font-size': '25px'
                    },
                    /*x: -100,*/
                    align:'center',
                    y: 10,
                    zIndex: 1,
                    center: ['30%', '65%']
                   /* textAlign:left*/
                },

                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'
                    }],
                    /*size: '120%',*/
                    size: '80%',
                    center: ['30%', '65%']
                },
                    {
                    startAngle: -120,
                    endAngle: 120,
                        size: '80%',
                    center: ['30%', '65%'],
                    background: []
                }],

                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, '#fff'],
                        //[0.101, '#0f0'],
                        //[0.201, '#2d0'],
                        //[0.301, '#4b0'],
                        //[0.401, '#690'],
                        //[0.501, '#870'],
                        //[0.601, '#a50'],
                        //[0.701, '#c30'],
                        //[0.801, '#e10'],
                        //[0.901, '#f03'],
                        //[1, '#f06']
                        [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']
                    ]
                }, {
                    linkedTo: 0,
                    pane: 1,
                    lineWidth: 5,
                    lineColor: 'white',
                    tickPositions: [],
                    zIndex: 6
                }],

                series: [{
                    animation: false,
                    dataLabels: {
                        enabled: false,
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                            '<span style="font-size:12px;color:silver">units</span></div>'
                    },
                    point: {
                        events: {
                            mouseOver: function () {
                                var point = this,
                                    yAxis = point.series.yAxis,
                                    subtitle = yAxis.subtitle;

                                if (subtitle) {
                                    var yAxisValue = point.y,
                                        yAxisText = yAxis.axisTitle.textStr;

                                    subtitle.attr({
                                        text: yAxisText + ': ' + yAxisValue
                                    });
                                }
                            },
                            mouseOut: function () {
                                var point = this,
                                    yAxis = point.series.yAxis,
                                    subtitle = yAxis.subtitle;

                                if (subtitle) {
                                    subtitle.attr({
                                        text: ''
                                    });
                                }
                            }
                        }
                    },
                    borderWidth: 0,
                    color: Highcharts.getOptions().colors[0],
                    radius: '100%',
                    innerRadius: '80%',
                    data: data
                }]
            });
        });

<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="container"></div>

如何根据图表的大小和位置对齐副标题和标题？

Answer 1

你可以试试这个

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing Doc</title>
    <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>

</head>
<body>
   
     
     <div id="chartContainer" style="width:100%; height:400px;"></div>

     <script>
        var rawData = 90;
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;
} 

function drawChart(){

    // Define chart options
    var options = {
       chart: {
         type: 'solidgauge',
         marginTop: 50
       },
       title: {
         text: 'Speedometer'
       },
       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, '#fff'],
                //[0.101, '#0f0'],
                //[0.201, '#2d0'],
                //[0.301, '#4b0'],
                //[0.401, '#690'],
                //[0.501, '#870'],
                //[0.601, '#a50'],
                //[0.701, '#c30'],
                //[0.801, '#e10'],
                //[0.901, '#f03'],
                //[1, '#f06']
                [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: [{
         name: 'Speed',
         data: chartData,
         dataLabels: {
           format: '<div style="text-align:center"><span style="font-size:25px">{y}</span><br/>' +
               '<span style="font-size:12px;opacity:0.4">km/h</span></div>',
           borderWidth: 0,
           y: -20
         },
         tooltip: {
           valueSuffix: ' km/h'
         },
         borderWidth: 0,
         color: Highcharts.getOptions().colors[0],
         radius: '100%',
         innerRadius: '80%',
         // Set dial
         dial: {
           radius: '100%',
           backgroundColor: Highcharts.getOptions().colors[0],
           baseWidth: 10,
           topWidth: 1,
           baseLength: '90%',
           rearLength: '0%'
         }
       }]
     };
 
     // Create chart
     var chart = Highcharts.chart('chartContainer', options);
}

drawChart();
     </script>

    </body>
</html>