charts - solidgauge Highcharts 图表中正确的 borderWidth 应该是多少？

Question

我按照这个例子来理解 solidgauge 图表是如何工作的:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/

plotOptions: {
    solidgauge: {
        borderWidth: '34px',
        dataLabels: {
            enabled: false
        },
        linecap: 'round',
        stickyTracking: false
    }
},

在此示例中，34 像素的 borderWidth 效果很好。但是，如果我更改图表的大小或更改 Pane 对象中背景的 outerRadius 或 innerRadius，则 34px borderWidth 不再与背景匹配(如预期的那样)。

我试图找出一个 borderWidth 的公式，其中包括图表的大小、是否有图例(图例占用大小)以及背景的内外半径，不幸的是没有成功:(虽然我快到了，但大多数时候我会错过 1、2 或 3 个像素的正确值，所以我一定是忘记了什么。

在我看来，最大的问题是我必须将背景的以百分比表示的大小转换为 borderWidth 的像素。

有人有什么建议吗？提前致谢。

Answer 1

可以从图表背景中创建的圆弧中获取宽度。然后使用计算出的宽度来更新系列。这里所有的 Pane 都是等宽的，所以可以获得一个宽度并将其设置为所有系列。

示例:http://jsfiddle.net/xs0gj2zu/

var token = true;
Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        marginTop: 50,
        events:{
            load: function(){
                token = false;
              var each = Highcharts.each,
                  series = this.series,
                  band = this.yAxis[0].plotLinesAndBands[0],
                  d = band.svgElem.d.split(" "),
                  width = parseFloat(d[13]) - parseFloat(d[2]);

              each(series, function(s){
                s.update({borderWidth: width}, false);
              });
              this.redraw();
              token = true;
          },
            redraw: function(){
            if(token) {
                token = false;

              var each = Highcharts.each,
                  series = this.series,
                  band = this.yAxis[0].plotLinesAndBands[0],
                  d = band.svgElem.d.split(" "),
                  width = parseFloat(d[13]) - parseFloat(d[2]);

              each(series, function(s){
                s.update({borderWidth: width}, false);
              });
              this.redraw();

              token = true;
            }
          }
        }
    },
    ...

(token是一个变量，用来避免死循环，因为在重绘时调用了重绘。)