Highcharts - 带休息的仪表图表

时间:2018-03-05 16:59:34

标签: javascript highcharts

我试图沿轴线在仪表图上打破。它看起来像下面 -

enter image description here

我有我的jsfiddle设置来实现上面的图表,但是休息时间并不是很有效 - JSFiddle链接 - http://jsfiddle.net/arj_ary/1g0v9Lhg/42/

代码中值得注意的部分是 -

breaks: [{
          from: 100,
          to: 120,
          breakSize: 20,
          repeat: 10
      }]

有人可以帮我弄清楚我到底错过了什么,或者如何在图表中找到这3个休息时间。

提前致谢!

编辑:我错过了一个断轴模块。现在加载它,仍然无法在轴上获得3个不同的中断。

<script src="https://code.highcharts.com/modules/broken-axis.js">

1 个答案:

答案 0 :(得分:0)

将刻度位置设置为25,50和75,这应该与solidgauge图表上的窗格对象一起使用 -

var chartOptions = {
            chart: {
                type: 'solidgauge',
                renderTo: this.el,
                width: this.chartWidth,
                height: this.chartHeight,
                margin: [0, 0, 0, 0]
            },
            title: null,
            tooltip: {
                enabled: false
            },
            pane: {
                size: '100%',
                center: ['50%', '60%'],
                startAngle: -135,
                endAngle: 135,
                background: {
                    borderWidth: 13,
                    backgroundColor: 'transparent',
                    shape: 'arc',
                    borderColor: '#E6E6E6',
                    outerRadius: '90%',
                    innerRadius: '90%'
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                labels: {
                    enabled: false
                },
                lineWidth: 0,
                tickPositions: [25, 50, 75],
                minorTickWidth: 0,
                tickWidth: 10,
                tickLength: 28,
                tickColor: 'white',
                zIndex: 6,
            },

            plotOptions: {
                solidgauge: {
                    animation: false,
                }
            }
}