如何使用 highcharts 创建半圆形量规?

f4t66c6m  于 2022-11-10  发布在  Highcharts
关注(0)|答案(5)|浏览(151)

我必须使用 highcharts 创建一个半圆形 Jmeter 图。我有this one,但这个有一个完整的圆形表盘。需要的是一个半圆形表盘,即,只包含表盘的上部。

ngynwnxp

ngynwnxp1#

您可以将中心参数添加到窗格部分,

pane : {
  center: ['50%', '100%']
   ...
}

请参见修改后的演示http://jsfiddle.net/EjRLw/524/
请参阅API highcharts http://api.highcharts.com/highcharts#pane.center

1zmg4dgp

1zmg4dgp2#

pane: {
        startAngle: -90,
        endAngle: 90,
        background:[]
    },

这样就行了。

wfypjpf4

wfypjpf43#

像这样改变最后一个功能,您将拥有完整表盘的上部

// Add some life
    function(chart) {
        setInterval(function() {
            var point = chart.series[0].points[0],
                newVal, inc = 100;

            newVal = inc;
            if (newVal < 0 || newVal > 100) {
                newVal = 50;
            }

            point.update(newVal);

        }, 3000);

    });
2w2cym1i

2w2cym1i4#

您可以将背景形状设置为弧形,例如

pane:{
      background:{
        ...
        shape:'arc'
        ...
      }
    }

然后使用此CSS删除半圆下方的空间

.chatcontainer > div {
   margin-bottom: -35% !important
}
.chatcontainer > div.highcharts-container > svg {
   margin-bottom: -35%; max-height: 65% !important;
}
nom7f22z

nom7f22z5#

Highcharts.chart('SemiCircularGauge', {
                    chart: {
                        type: 'gauge',
                        backgroundColor: '#e8e8e8',
                        plotBackgroundColor: {
                            stops: [
                                [0, '#FFF4C6'],
                                [50, '#FFFFFF'],
                                [100, '#FFF4C6']
                            ]
                        },
                        height: 250
                    },
                    title: {
                        text: 'Semi Circular Gauge',
                        verticalAlign: 'bottom'
                    },
                    pane: [{
                        startAngle: -90,
                        endAngle: 90,
                        background: null,
                        center: ['50%', '100%'],
                        size: 300
                    }, {
                        startAngle: -90,
                        endAngle: 90,
                        background: null,
                        center: ['50%', '100%'],
                        size: 50
                    }],
                    exporting: {
                        enabled: true
                    },
                    tooltip: {
                        enabled: true
                    },
                    yAxis: [{
                        min: 0,
                        max: 100,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        labels: {
                            rotation: 'auto',
                            distance: 20
                        },
                        plotBands: [{
                            from: 0,
                            to: 20,
                            color: "#A45D5B" 
                            }, {
                            from: 20,
                            to: 40,
                            color: "#C7A46F" 
                            }, {
                            from: 40,
                            to: 60,
                            color: "#D0BF94" 
                            }, {
                            from: 60,
                            to: 80,
                            color: "#71AA8D" 
                            }, {
                            from: 80,
                            to: 100,
                            color: "#3E7873" 
                            }],
                        //pane: 0,
                        title: {
                            text: '<span style="font-size:8px">Semi Circular Gauge</span>',
                            y: -20
                        }
                    }, {
                        min: 0,
                        max: 100,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        labels: {
                            rotation: 'auto',
                            distance: 20
                        },
                        plotBands: [{
                            from: 0,
                            to: 20,
                            innerRadius: '100%',
                            outerRadius: '105%',
                            color: "#A45D5B" 
                            }, {
                            from: 20,
                            to: 40,
                            innerRadius: '100%',
                            outerRadius: '105%',
                            color: "#C7A46F" 
                            }, {
                            from: 40,
                            to: 60,
                            innerRadius: '100%',
                            outerRadius: '105%',
                            color: "#D0BF94" 
                            }, {
                            from: 60,
                            to: 80,
                            innerRadius: '100%',
                            outerRadius: '105%',
                            color: "#71AA8D" 
                            }, {
                            from: 80,
                            to: 100,
                            innerRadius: '100%',
                            outerRadius: '105%',
                            color: "#3E7873" 
                            }],
                        pane: 1,
                        title: {
                            text: ''
                        }
                    }],
                    plotOptions: {
                        gauge: {
                            dataLabels: {
                                enabled: false
                            },
                            dial: {
                                radius: '100%'
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: 'Semi Circular Gauge',
                       data: [68],
                        yAxis: 0
                    }, {
                        name: 'Semi Circular Gauge',
                        data: [68],
                        yAxis: 1
                    }]
                },
                    function (chart) {
                        if (!chart.renderer.forExport) {
                            setInterval(function () {
                                var point = chart.series[0].points[0],
                                    newVal,
                                    inc = 0;
                                newVal = point.y + inc;
                                if (newVal < 0 || newVal > 100) {
                                    newVal = point.y - inc;
                                }
                                point.update(newVal);
                            }, 3000);
                        }
                    });

相关问题