solidgauge Highcharts图表中右边框的宽度应该是多少？-Java 学习之路

我正在按照这个例子来理解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转换以百分比表示的背景，以像素为单位 .

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

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

回复于 2024-05-05T22:47:42+08:00

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

1 回答

相关问题