亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

調整大小時自定義儀表圖表不起作用

調整大小時自定義儀表圖表不起作用

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


查看完整回答
反對 回復 2023-11-02
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號