highcharts gauge 速度 仪表盘动态创建动态改变指针

来源:互联网 发布:配音秀软件 编辑:程序博客网 时间:2024/05/18 00:05
shmev1.LoadBaseChart = function (divID, name, unit, value, minValue, maxValue, tick, almMin, almMax) {
        $('#' + divID).highcharts({
            chart: {
                type: 'gauge',
                backgroundColor: '#0F9BDE',
                borderColor: '#0F9BDE',
                plotBorderWidth: 1,
                plotBackgroundColor: {
                    linearGradient: { x1: 0, y1: 0 },
                    stops: [
                        [0, '#0F9BDE'],
                        [0.5, '#26A3DE'],
                        [1, '#0C98DA']
                    ]
                },
                plotBackgroundImage: null,
                height: 250
            }, exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            pane: [{
                startAngle: -90,
                endAngle: 90,
                background: null,
                center: ['50%', '90%'],
                size: 300
            }],
            yAxis: [{
                min: minValue,
                max: maxValue,
                tickInterval: tick,
                minorTickPosition: 'outside',
                tickPosition: 'outside',
                labels: {
                    rotation: 'auto',
                    distance: 20,
                    style: {
                        color: '#FFFFFF'
                    }
                },
                plotBands: [{
                    from: almMax,
                    to: maxValue,
                    color: '#C02316',
                    innerRadius: '100%',
                    outerRadius: '105%'
                }, {
                    from: minValue,
                    to: almMin,
                    color: '#882C25',
                    innerRadius: '100%',
                    outerRadius: '105%'
                }],
                pane: 0,
                title: {
                    text: '<div style="font-size:20px;color:#fff;">' + name + unit + '</div><br/><div style="font-size:32px;color:#1BFD2C;">' + (value == -99 ? "<div style=\"font-size:18px;color:#F70808;font-weight: bolder;\">无数据</div>" : value.toFixed(1)) + '</div>',
                    y: -30
                }
            }],
            plotOptions: {
                gauge: {
                    dataLabels: {
                        enabled: false
                    },
                    dial: {
                        backgroundColor: '#FFD700',
                        radius: '100%'
                    },
                    pivot: {
                        backgroundColor: "#fff"
                    }
                }
            },
            series: [{
                name: name,
                tooltip: {
                    valueSuffix: unit
                },
                data: [0],
                yAxis: 0
            }],
            tooltip: {
                enabled: false,
                valueDecimals: 0,
                valuePrefix: '',
                valueSuffix: ''
            }
        },
        // Let the music play
        function (chart) {
            setChart(divID, chart);
            if (chart.series) { // the chart may be destroyed
                var left = chart.series[0].points[0];


                if (value == -99)
                    left.update(0, false);
                else
                    left.update(value, false);
                //right.update(rightVal, false);
                chart.redraw();


                if(value!=-99)
                    removeRandomChart(chart, value, divID);
            }


        });

    }


var intervalwd, intervalsd;
    removeRandomChart = function (chart, value, divID) {
        if (divID == 'chartContentWD') {
            window.clearInterval(intervalwd);
            intervalwd = setInterval(function () {
                if (chart.series) {
                    var left = chart.series[0].points[0],
                        leftVal,
                        inc = Math.random() * 0.9 - 0.4;
                    leftVal = left.y + inc;


                    if (leftVal <= (value - 1) || leftVal >= (value + 1)) {
                        leftVal = left.y - inc;
                    }


                    left.update(leftVal, false);
                    chart.redraw();
                }
            }, 5000);
        } else if (divID == 'chartContentsnSD') {
            window.clearInterval(intervalsd);
            intervalsd = setInterval(function () {
                if (chart.series) {
                    var left = chart.series[0].points[0],
                        leftVal,
                        inc = Math.random() * 0.9 - 0.4;
                    leftVal = left.y + inc;


                    if (leftVal <= (value - 1) || leftVal >= (value + 1)) {
                        leftVal = left.y - inc;
                    }


                    left.update(leftVal, false);
                    chart.redraw();
                }
            }, 500);
        }
    }
    createChart = function () {
        shmev1.LoadBaseChart("chartContentWD", "温度", " ℃", -99, -40, 40, 5, -10, 25);
        shmev1.LoadBaseChart("chartContentsnSD", "湿度", " %", -99, 0, 80, 5, 0, 60);
    }


    var charwd = '', chartsd = '';
    setChart = function (divID,chart) {
        if (divID == 'chartContentWD')
            charwd = chart;
        else if (divID == 'chartContentsnSD')
            chartsd = chart;
    }
    changeChart = function (divID, value,name,unit) {
        var chart = ''; 
        if (divID == 'chartContentWD')
            chart = charwd;
        else if (divID == 'chartContentsnSD')
            chart = chartsd;
        //除了改变值还需改变提示信息  判断值为-99的情况
        if (chart!='' && chart.series) {
            var left = chart.series[0].points[0];


            var strHtml = '<div style="font-size:20px;color:#fff;">' + name + unit + '</div><br/>';
            strHtml += '<div style="font-size:32px;color:#1BFD2C;">' + (value == -99 ? "<div style=\"font-size:18px;color:#F70808;font-weight: bolder;\">无数据</div>" : value.toFixed(1)) + '</div>';
            chart.yAxis[0].setTitle({
                text: strHtml
            });
            left.update(value, false);
            chart.redraw();


            if (value != -99)
                removeRandomChart(chart, value, divID);
        }
    }