javascript - 如何去除实体压力表下方的空白空间？

Question

我有具有以下配置的固体压力表:

$("#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]
  }]
});

固体压力表下方有空的、无法使用的空间，这使得容器变得不必要的大。我怎样才能删除它？

Answer 1

为了定位你的solidGauge，你可以使用pane.center参数: http://api.highcharts.com/highcharts/pane.center

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

此外，您可以使用innerRadius、outerRadius(对于 Pane 背景)和radius(对于solidgauge 数据)更改solidGauge 的大小。

在这里您可以找到它如何工作的示例:http://jsfiddle.net/7zpggvLe/1/