javascript - 如何在中间而不是底部显示数据，而其中一个数据的值有很大差异。highcharts.js

Question

上图显示图表底部有 3 条线。我想让它们显示在中间，如下图所示。

我尝试在 yAxis 对象中设置最大值。但这不是很理想

标签： javascripthighcharts

Answer 1

我通过在 yAxis 中设置索引来解决它，该索引在 series.yAxis 中的顺序应该相同。

通过这种方式，我可以将数据分组并独立于其他具有巨大差异的数据。

这是样本

Highcharts.chart('container', {
  "chart": {
    "alignTicks": false,
    "zoomType": false
  },
  "title": {
    "text": "裝置即時資訊",
    "floating": false,
    "align": "left"
  },
  "xAxis": [{
    "categories": ["INV01", "INV02", "INV03", "INV04", "INV05", "INV06", "INV07", "INV08", "INV09", "INV10", "INV11"],
    "crosshair": true,
    "index": 0,
    "isX": true
  }],
  "tooltip": {
    "shared": true
  },
  "legend": {
    "layout": "horizontal",
    "align": "right",
    "x": 0,
    "verticalAlign": "top",
    "y": 0,
    "floating": true,
    "backgroundColor": "#FFFFFF"
  },
  "plotOptions": {
    "line": {
      "dataLabels": {
        "enabled": true,
        "format": "{point.y:,.2f}"
      }
    },
    "column": {
      "dataLabels": {
        "enabled": true,
        "format": "{point.y:,.2f}"
      }
    }
  },
  "yAxis": [{
    "gridLineColor": "transparent",
    "labels": {
      "format": "{value} kWh",
      "enabled": false
    },
    "title": {
      "text": ""
    },
    "opposite": false,
    "index": 0
  }, {
    "gridLineColor": "transparent",
    "labels": {
      "format": "{value} kWh",
      "style": {},
      "enabled": false
    },
    "title": {
      "text": "",
      "style": {}
    },
    "opposite": false,
    "index": 1
  }, {
    "gridLineColor": "transparent",
    "labels": {
      "format": "{value} kW",
      "style": {},
      "enabled": false
    },
    "title": {
      "text": "",
      "style": {}
    },
    "opposite": false,
    "index": 2
  }],
  "series": [{
    "name": "累積發電量 (kWh)",
    "data": [140212.2, 139949.6, 139821.4, 133556.8, 140040.4, 140997.8, 139240.4, 130340.6, 139336.7, 142920.5, 92437.5],
    "tooltip": {
      "valueSuffix": "",
      "pointFormat": "<span style=\"color:{point.color}\">●&lt;/span> {series.name}: <b>{point.y:,.1f} kWh</b><br/>"
    },
    "type": "column",
    "yAxis": 0
  }, {
    "name": "今日發電量 (kWh)",
    "data": [44, 41, 42, 41, 46, 48, 47, 44, 43, 45, 29],
    "tooltip": {
      "valueSuffix": "",
      "pointFormat": "<span style=\"color:{point.color}\">●&lt;/span> {series.name}: <b>{point.y:,.1f} kWh</b><br/>"
    },
    "type": "line",
    "yAxis": 1
  }, {
    "name": "交流發電功率 (kW)",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    "tooltip": {
      "valueSuffix": "",
      "pointFormat": "<span style=\"color:{point.color}\">●&lt;/span> {series.name}: <b>{point.y:,.1f} kW</b><br/>"
    },
    "type": "line",
    "yAxis": 2
  }, {
    "name": "直流發電功率 (kW)",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    "tooltip": {
      "valueSuffix": "",
      "pointFormat": "<span style=\"color:{point.color}\">●&lt;/span> {series.name}: <b>{point.y:,.1f} kW</b><br/>"
    },
    "type": "line",
    "yAxis": 2
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>