如何移除实心量规下方的空白区域?

时间:2016-09-15 05:55:08

标签: javascript jquery-ui highcharts

我有坚固的仪表,配置如下:

$("#container").highcharts({
  chart: {
    type: "solidgauge",
    margin: [0, 0, 0, 0],
    spacing: [0, 0, 0, 0],
  },
  title: {
    title: "ABC",
    style: { "color": "white" }
  },
  pane: {
    startAngle: -90,
    endAngle: 90,
    background: {
      innerRadius: "60%",
      outerRadius:" 100%",
      shape: "arc"
    }
  },
  tooltip: { enabled: false },
  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: true,
        borderColor: "transparent",
        color: "white",
        crop: false,
        style: {
          "fontSize": "2em",
          "textShadow": "none"
        }
      }
    } 
  },
  yAxis: {
    labels: {
      enabled: true,
      distance: 55,
      style: {
        "color": "white",
        "fontSize": "1.25em"
      }
    },
    tickPosition: "outside",
    tickPositions: [25, 50, 75, 100],
    tickColor: "white",
    minorTickLength: 0,
    min: 0,
    max: 100,
    tickLength: 10,
    stops: [
      [0.0, "#00FF00"],
      [5.0, "#00FF00"],
      [5.01, "#FFFF00"],
      [7.5, "#FFFF00"],
      [7.51, "#FF0000"],
      [1.0, "#FF0000"]
    ],
  },
  series: [{
    name: "ABC",
    data: [67]
  }]
});

固体仪表下面有空的,无法使用的空间,这使得容器不必要地变大。我该如何删除它?

1 个答案:

答案 0 :(得分:1)

要定位solidGauge,您可以使用pane.center参数: AclEntryPermission Enums

pane: {
  startAngle: -90,
  endAngle: 90,
  center: ['50%', '100%'],
  background: {
    innerRadius: "120%",
    outerRadius: " 200%",
    shape: "arc"
  }
},

此外,您可以使用innerRadius,outerRadius(对于窗格背景)和半径(对于solidgauge数据)更改solidGauge的大小。

在这里,您可以找到一个示例:http://api.highcharts.com/highcharts/pane.center