Highcharts柱状图高度异常：导入Striped Table数据后显示不符

你遇到的核心问题是两个柱状图系列分别绑定了独立的Y轴，Highcharts会为每个Y轴自动计算刻度范围，这就导致即使一个系列的数值更小，但如果它对应的Y轴刻度区间更窄，视觉上柱子反而会更高。比如你提到的2018/05/01，Power Duration数值更大但柱子看起来更高，就是因为它绑定的yAxis:1刻度范围远小于Insolation绑定的yAxis:0，导致视觉高度和实际数值脱节。

下面给你两种可行的解决方案：

方案一：将两个柱状图绑定到同一个Y轴 #

这是最直接的解决方式，毕竟两个系列都是时长类数据，属于同一维度，完全可以共用一个Y轴：

var ChartObj = { 
  type: "chart", 
  value: { 
    "chart": { "alignTicks": false, "zoomType": "xy" }, 
    "title": { "text": " ", "floating": false, "align": "center" }, 
    "xAxis": [ { "categories": [], "crosshair": true, "index": 0, "isX": true } ], 
    "tooltip": { "shared": true }, 
    "legend": { "layout": "horizontal", "align": "right", "x": 0, "verticalAlign": "top", "y": 0, "floating": false, "backgroundColor": "#FFFFFF" }, 
    "yAxis": [ 
      { 
        "gridLineColor": "transparent", 
        "labels": { "format": "{value}", "style": { "color": "#7cb5ec" }, "enabled": false }, 
        "title": { "text": null, "style": { "color": "#7cb5ec" } }, 
        "opposite": false, 
        "index": 0, 
      }, 
      { 
        "gridLineColor": "transparent", 
        "labels": { "format": "{value}", "style": { "color": "#f7a35c" }, "enabled": false }, 
        "title": { "text": null, "style": { "color": "#f7a35c" } }, 
        "opposite": true, 
        "index": 1, 
      } 
    ], 
    "series": [ 
      { // Insolation 
        "name": "Insolation Duration", 
        "color": "#90ed7d", 
        "tooltip": { "valueSuffix": "", "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>" }, 
        "yAxis": 0, 
        "type": "column", 
        "data": [], 
        "_symbolIndex": 0 
      }, 
      { // Power 
        "name": "Power Duration", 
        "color": "#f7a35c", 
        "tooltip": { "valueSuffix": "", "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>" }, 
        "yAxis": 0, // 改为和Insolation共用同一个Y轴
        "type": "column", 
        "data": [], 
        "_symbolIndex": 1 
      }, 
      { // PR 
        "name": "PR", 
        "color": "#7cb5ec", 
        "tooltip": { "valueSuffix": "", "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>" }, 
        "yAxis": 1, 
        "type": "line", 
        "data": [] 
      } 
    ] 
  } 
};

方案二：让两个Y轴刻度关联（如果必须保留双Y轴） #

如果因为业务需求必须给两个柱状图分别用Y轴，可以设置linkedTo属性，让其中一个Y轴的刻度范围和另一个保持一致：

"yAxis": [ 
  { 
    "gridLineColor": "transparent", 
    "labels": { "format": "{value}", "style": { "color": "#7cb5ec" }, "enabled": false }, 
    "title": { "text": null, "style": { "color": "#7cb5ec" } }, 
    "opposite": false, 
    "index": 0, 
  }, 
  { 
    "gridLineColor": "transparent", 
    "labels": { "format": "{value}", "style": { "color": "#90ed7d" }, "enabled": false }, 
    "title": { "text": null, "style": { "color": "#90ed7d" } }, 
    "opposite": true, 
    "index": 1, 
    "linkedTo": 0 // 关联到第一个Y轴，强制同步刻度范围
  }, 
  { 
    "gridLineColor": "transparent", 
    "labels": { "format": "{value}", "style": { "color": "#f7a35c" }, "enabled": false }, 
    "title": { "text": null, "style": { "color": "#f7a35c" } }, 
    "opposite": true, 
    "index": 2, 
  } 
]

这样修改后，yAxis1的刻度会完全跟随yAxis0，两个柱状图的高度就能准确反映实际数值大小了。

另外我还帮你修复了tooltip里的符号错误（把乱码的鈼�改成了正常的●），同时补全了每个系列的名称，这样图例和tooltip的信息会更清晰。

内容的提问来源于stack exchange，提问作者Penny Liu