javascript - 如何使用高图表创建半圆形仪表？

Question

我必须使用高图表创建一个半圆形仪表图表。我有这个，但是这个有一个完整的圆形表盘。需要的是一个半圆形的表盘，即只包含表盘的上部。

Answer 1

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

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

查看修改后的演示，http://jsfiddle.net/EjRLw/524/

参考高图API http://api.highcharts.com/highcharts#pane.center

Answer 2

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

那应该这样做。

Answer 3

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

 // 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);

    });

Answer 4

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

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

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

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