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
    }
},

在此示例中，34px borderWidth工作正常。但是，如果我更改图表的大小或更改窗格对象中背景的outerRadius或innerRadius，则34px borderWidth将不再与背景匹配（如预期的那样）。

我试图找出包含图表大小的borderWidth的公式，无论我是否有图例（图例消耗大小）以及背景的内外半径，不幸的是没有成功:( 虽然我几乎在那里，但大多数时候我都错过了正确的1,2或3像素值，所以我必须忘记一些事情。

正如我所看到的，最重要的问题是我必须为borderWidth转换以百分比表示的背景，以像素为单位。

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

Answer 1

可以从图表背景中创建的弧线获得宽度。然后使用该计算的宽度更新系列。这里所有窗格的宽度相等，因此可以获得一个宽度并将其设置为所有系列。

示例：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是一个用于避免无限循环的变量，因为在重绘时会调用重绘。）

solidgauge Highcharts图表中右边框的宽度应该是多少？

1 个答案: