javascript - 是否可以延迟 Highcharts Angular 计中的针加载动画？

Question

我创建了一个 Highcharts Angular 仪表。我需要延迟装针动画。

代码如下:

$(function () {

    $('#meter').highcharts({

        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
      credits: {
          enabled: false
      },
        title: {
            text: ''
        },
      //
      plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '70%',
                    backgroundColor: '#000',
                    topWidth: 1,
                    baseWidth: 5,
                    rearLength: '20%'
                },
                pivot: {
                    radius: 5,
                    borderWidth: 5,
                    borderColor: '#000',
                    backgroundColor: '#fff'
                }
            }
        },

        pane: {
            startAngle:-90,
            endAngle: 90,
            center: ['50%', '55%'],
                size: '85%',
                startAngle: -90,
                endAngle: 90,              
                background: {
                    backgroundColor: '#0187CC',
                    innerRadius: '110%',
                    outerRadius: '100%',
                    borderColor: 'transparent',
                    shape: 'arc',
                    
                },
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 30,
            
            minorTickInterval: 'auto',
            minorTickWidth: 0,            
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#0187CC',            

            tickPixelInterval: 30,
            tickWidth: 10,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#0187CC',           
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: ''
            },
            plotBands: [{              
                color: '#FFF' 
            } 
          ]
        },

        series: [{
            name: 'Speed',
            data: [20],
            tooltip: {
                valueSuffix: ' Mbps'
            }
        }]

    },

    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
                    inc = Math.round((Math.random() - 0) * 0);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 200) {
                    newVal = point.y - inc;
                }

                point.update(newVal);

            }, 3000);
        }
    });
});

.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
	display: none;
}


.highcharts-axis-labels text{
	fill: #000 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.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/exporting.js"></script>
<script src="meter.js"></script>


<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

Answer 1

在您的“plotOptions”属性中，添加以下代码:

series: {
    animation: {
        duration: 2000
    }
}

这会导致仪表指针启动得更慢。增加数量以减慢速度；减少数量以加快速度。

另请参阅下面更新的代码片段。

希望对您有所帮助!

$(function () {

    $('#meter').highcharts({

        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
      credits: {
          enabled: false
      },
        title: {
            text: ''
        },
      //
      plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '70%',
                    backgroundColor: '#000',
                    topWidth: 1,
                    baseWidth: 5,
                    rearLength: '20%'
                },
                pivot: {
                    radius: 5,
                    borderWidth: 5,
                    borderColor: '#000',
                    backgroundColor: '#fff'
                }
            },
            series: {
                animation: {
                    duration: 2000
                }
            }

        },

        pane: {
            startAngle:-90,
            endAngle: 90,
            center: ['50%', '55%'],
                size: '85%',
                startAngle: -90,
                endAngle: 90,              
                background: {
                    backgroundColor: '#0187CC',
                    innerRadius: '110%',
                    outerRadius: '100%',
                    borderColor: 'transparent',
                    shape: 'arc',
                    
                },
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 30,
            
            minorTickInterval: 'auto',
            minorTickWidth: 0,            
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#0187CC',            

            tickPixelInterval: 30,
            tickWidth: 10,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#0187CC',           
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: ''
            },
            plotBands: [{              
                color: '#FFF' 
            } 
          ]
        },

        series: [{
            name: 'Speed',
            data: [20],
            tooltip: {
                valueSuffix: ' Mbps'
            }
        }]

    },

    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
                    inc = Math.round((Math.random() - 0) * 0);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 200) {
                    newVal = point.y - inc;
                }

                point.update(newVal);

            }, 3000);
        }
    });
});

.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
	display: none;
}


.highcharts-axis-labels text{
	fill: #000 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.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/exporting.js"></script>
<script src="meter.js"></script>


<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>