HUWWW
2023-11-02 20:16:28
我需要自定義儀表高圖作為我將其定制為 jsfiddle 代碼。var gaugeOptions = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90, background: { backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }, exporting: { enabled: false }, tooltip: { enabled: false }, // the value axis yAxis: { stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 2, tickWidth: 10, tickInterval: 10, lineColor: '#fff', minorTickInterval: null, labels: { enabled: false }, minorTickPosition: 'inside', tickPosition: 'inside', tickPixelInterval: 10, tickLength: '50', tickColor: '#fff', zIndex: 6, minorTickWidth: 0, }, plotOptions: { solidgauge: { dataLabels: { enabled: false }, rounded: false }, gauge: { dial: { radius: '40', backgroundColor: '#1d96e0', baseWidth: 20, topWidth: 1, baseLength: '5%', // of radius rearLength: '0%' }, pivot: { radius: '10', backgroundColor: '#1d96e0' } }, series: { dataLabels: { enabled: true } } },};https://jsfiddle.net/viethien/9L4xcho3/5/但是當我調整儀表圖表的大小時,它顯示得不好我擔心計算儀表板的寬度以適應風格。
1 回答

人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
您可以動態計算和設置tickLength軸的屬性:
var allowChartUpdate = true;
var gaugeOptions = {
chart: {
type: 'solidgauge',
events: {
render: function() {
var tickLength = this.pane[0].group.getBBox().width / 4
if (allowChartUpdate) {
allowChartUpdate = false;
this.yAxis[0].update({
tickLength: tickLength
});
allowChartUpdate = true;
}
}
}
}
}
現場演示: https: //jsfiddle.net/BlackLabel/vbctd9ef/
API 參考: https://api.highcharts.com/class-reference/Highcharts.Axis#update
添加回答
舉報
0/150
提交
取消