HighCharts标尺从-100%到100%

我在尝试如何定义一个规范，可能是solidgauge类型，在-100%和100%之间移动。-100%为纯红色，0%为纯黄色，100%为纯绿色。我希望图形从0%开始，然后移动到任意一侧。我还希望图形显示一条线（类似于从中心点反射到图形弧末端的速度计（但不是必需的）。
这将是页面上的静态图形，一旦为页面计算，它将不会更新，除非刷新页面。
我想像实体活动计量器这样的东西才是我所需要的。但是，我需要两个不同方向的图形，而我不知道如何定义。我希望计量器有一个从0到-90的图形，而另一个从0到90。我希望它们以0作为相同的终点，正端为渐变绿色，负端为渐变红色。

显示正和负的样品计量器

Jmeter 显示阳性结果

Jmeter 显示负结果

多亏了一个团队成员，我有了答案。

var gaugeOptions = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['71%', '80%'],
        size: '140%',
        startAngle: -90,
        endAngle: 0,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#DF5353'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions2 = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['10%', '85%'],
        size: '140%',
        startAngle: 0,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#55BF3B'], // yellow
            [0.9, '#55BF3B'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions3 = {

    chart: {
           backgroundColor: 'transparent',
        type: 'solidgauge'

    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{

        data: [0],

    }]

}));

// The RPM gauge
var chartRPM = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions2, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{
        name: '',
        data: [0],

        tooltip: {
            valueSuffix: ''
        }
    }]

}));

var chartTitle = Highcharts.chart('container-title', Highcharts.merge(gaugeOptions3, {
    yAxis: {
        min: -100,
        max: 100,
        title: {
            text: 'Progress'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Progress',
        data: [0],
        dataLabels: {
            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">%</span></div>'
        },
        tooltip: {
            valueSuffix: ' %'
        }
    }]

}));

// Bring life to the dials
setInterval(function () {
    // Speed
    var point,
            point2,
                point3,
        newVal,
        newVal2,
        inc;

        point = chartSpeed.series[0].points[0];
        point2 = chartRPM.series[0].points[0];
        point3 = chartTitle.series[0].points[0];

        inc = Math.round((Math.random() - 0.5) * 100);
      //  newVal = point.y + inc;

        if (inc > 0 ) {
            newVal2 =  inc;
            newVal = 0;
        }else{
            newVal =  inc;
            newVal2 =0;
        }

        point.update(Math.abs(newVal));
    point2.update(newVal2);
     point3.update(inc);

}, 2000);

HighCharts标尺从-100%到100%

1条答案

相关问题

热门标签

最新问答