highcharts 列堆叠 Y 轴同步 - 值似乎表示为前一列的增加

Question

我有以下图表（下图）

我对堆叠的理解有误吗？ y 轴值范围不应该是 [-12, -1] 吗？

相反，highcharts 似乎在绘制堆栈时添加到类别的前一列的值，以 -5.3 + (-9.2) + (-12.0) + (-6.7) = -33.2 结束，因此将列绘制到 33.2 y 轴坐标，而不是将所有较小的值堆叠在 -12.0.

这是我的配置

我的数据按 y 排序（见下面的代码），highcharts 的文档提到

When stacking is enabled, data must be sorted in ascending X order.

{
    "chart": {
        "styledMode": false,
        "backgroundColor": "transparent",
        "spacing": [10, 5, 0, 0],
        "width": null,
        "height": "38%",
        "style": { "fontFamily": "inherit" }
    },
    "plotOptions": {
        "area": { "marker": { "enabled": false } },
        "spline": { "marker": { "enabled": false } },
        "line": { "marker": { "enabled": false } },
        "series": { "enableMouseTracking": true },
        "column": {
            "stacking": "normal",
            "dataLabels": { "enabled": true, "inside": true, "format": "{point.y:,.1f}", "style": { "fontWeight": "normal" } }
        }
    },
    "navigation": { "buttonOptions": { "enabled": false } },
    "xAxisConfig": {
        "xAxisOptions": {
            "min": 0.5,
            "startOnTick": false,
            "endOnTick": false,
            "minPadding": 0,
            "maxPadding": 0,
            "gridLineWidth": 0,
            "labels": {
                "style": {
                    "color": "#8095aa",
                    "lineHeight": "16px",
                    "textTransform": "uppercase",
                    "letterSpacing": "1.2px",
                    "fontSize": "10px",
                    "fontWeight": "normal"
                }
            },
            "categories": [
                "IGA",
                "LPD",
                "LTK",
                "MAN",
                "PTE",
                "VAL",
                "VAM",
                "VAS",
                "VBA",
                "VBS",
                "VEB",
                "VES",
                "VIC",
                "VIA",
                "VIC",
                "VIL",
                "VAS",
                "VTM"
            ],
            "max": 17
        }
    },
    "yAxisConfig": {
        "yAxisOptions": {
            "opposite": false,
            "gridLineColor": "#8095aa",
            "gridLineDashStyle": "Dot",
            "title": { "text": null },
            "offset": -10,
            "startOnTick": false,
            "minPadding": 0,
            "maxPadding": 0,
            "labels": { "style": { "color": "#8095aa", "lineHeight": "16px", "letterSpacing": "0.3px", "fontSize": "12px", "fontWeight": "normal" } },
            "tickPixelInterval": 20,
            "min": null,
            "max": null
        }
    },
    "colors": ["#9bd9a8", "#f9b36c", "#9ea2a5", "#95b3e1", "#cea3a6"],
    "series": [
        {
            "data": [
                { "y": -7.55234464138288, "tooltipLabel": "PTE" },
                { "y": -6.26724628978681, "tooltipLabel": "VAS" },
                { "y": -3.58044975748122, "tooltipLabel": "VAS" },
                { "y": -3.37783607784082, "tooltipLabel": "VBA" },
                { "y": -3.1935940773000002, "tooltipLabel": "VIC" },
                { "y": -0.2846235546, "tooltipLabel": "VIL" },
                { "y": -0.1796231514, "tooltipLabel": "VTM" },
                { "y": -0.0666363456, "tooltipLabel": "MAN" },
                { "y": -0.0464127807, "tooltipLabel": "VES" },
                { "y": -0.0160181769, "tooltipLabel": "VBS" },
                { "y": -0.0086822076, "tooltipLabel": "VAL" },
                { "y": 0, "tooltipLabel": "IGA" },
                { "y": 0, "tooltipLabel": "LPD" },
                { "y": 0, "tooltipLabel": "LTK" },
                { "y": 0, "tooltipLabel": "VAM" },
                { "y": 0, "tooltipLabel": "VEB" },
                { "y": 0, "tooltipLabel": "VIA" },
                { "y": 0, "tooltipLabel": "VIC" }
            ],
            "label": "Q2 19",
            "name": "Q2 19",
            "type": "column",
            "color": "#9bd9a8",
            "dashStyle": "Solid",
            "lineType": "Solid",
            "marker": {},
            "connectNulls": true
        },
        {
            "data": [
                { "y": -6.70349414707873, "tooltipLabel": "PTE" },
                { "y": -5.86808436147698, "tooltipLabel": "VAS" },
                { "y": -4.03754309365603, "tooltipLabel": "VAS" },
                { "y": -2.41595741864367, "tooltipLabel": "VBA" },
                { "y": -2.26943358871165, "tooltipLabel": "VIC" },
                { "y": -0.2018974188, "tooltipLabel": "VIL" },
                { "y": -0.0854778045, "tooltipLabel": "VBS" },
                { "y": -0.0758436822, "tooltipLabel": "VES" },
                { "y": -0.0301922313, "tooltipLabel": "VTM" },
                { "y": -0.0165710193, "tooltipLabel": "MAN" },
                { "y": 0, "tooltipLabel": "IGA" },
                { "y": 0, "tooltipLabel": "LPD" },
                { "y": 0, "tooltipLabel": "LTK" },
                { "y": 0, "tooltipLabel": "VAL" },
                { "y": 0, "tooltipLabel": "VAM" },
                { "y": 0, "tooltipLabel": "VEB" },
                { "y": 0, "tooltipLabel": "VIA" },
                { "y": 0, "tooltipLabel": "VIC" }
            ],
            "label": "Q3 19",
            "name": "Q3 19",
            "type": "column",
            "color": "#f9b36c",
            "dashStyle": "Solid",
            "lineType": "Solid",
            "marker": {},
            "connectNulls": true
        },
        {
            "data": [
                { "y": -12.0603270249, "tooltipLabel": "VAS" },
                { "y": -9.16146422264508, "tooltipLabel": "PTE" },
                { "y": -3.48553644219686, "tooltipLabel": "VIC" },
                { "y": -3.32470619551604, "tooltipLabel": "VBA" },
                { "y": -2.8986080112, "tooltipLabel": "VAS" },
                { "y": -0.039319459574637, "tooltipLabel": "VBS" },
                { "y": -0.0281927712, "tooltipLabel": "MAN" },
                { "y": -0.0106122489, "tooltipLabel": "VES" },
                { "y": -0.0095501142, "tooltipLabel": "VAM" },
                { "y": -0.0072576636, "tooltipLabel": "VEB" },
                { "y": -0.0014821356, "tooltipLabel": "VTM" },
                { "y": 0, "tooltipLabel": "IGA" },
                { "y": 0, "tooltipLabel": "LPD" },
                { "y": 0, "tooltipLabel": "LTK" },
                { "y": 0, "tooltipLabel": "VAL" },
                { "y": 0, "tooltipLabel": "VIA" },
                { "y": 0, "tooltipLabel": "VIC" },
                { "y": 0, "tooltipLabel": "VIL" }
            ],
            "label": "Q4 19",
            "name": "Q4 19",
            "type": "column",
            "color": "#9ea2a5",
            "dashStyle": "Solid",
            "lineType": "Solid",
            "marker": {},
            "connectNulls": true
        },
        {
            "data": [
                { "y": -9.24493828517629, "tooltipLabel": "PTE" },
                { "y": -8.45456974510156, "tooltipLabel": "VAS" },
                { "y": -3.91419326549166, "tooltipLabel": "VAS" },
                { "y": -2.7262006703053, "tooltipLabel": "VBA" },
                { "y": -2.64059928262624, "tooltipLabel": "VIC" },
                { "y": -0.0721207575, "tooltipLabel": "VIL" },
                { "y": -0.027267749714351, "tooltipLabel": "VEB" },
                { "y": -0.0205519149, "tooltipLabel": "LPD" },
                { "y": -0.0057894936, "tooltipLabel": "VBS" },
                { "y": -0.0036789159, "tooltipLabel": "MAN" },
                { "y": -0.0035612511, "tooltipLabel": "VTM" },
                { "y": -0.002792625, "tooltipLabel": "VES" },
                { "y": 0, "tooltipLabel": "IGA" },
                { "y": 0, "tooltipLabel": "LTK" },
                { "y": 0, "tooltipLabel": "VAL" },
                { "y": 0, "tooltipLabel": "VAM" },
                { "y": 0, "tooltipLabel": "VIA" },
                { "y": 0, "tooltipLabel": "VIC" }
            ],
            "label": "Q1 20",
            "name": "Q1 20",
            "type": "column",
            "color": "#95b3e1",
            "dashStyle": "Solid",
            "lineType": "Solid",
            "marker": {},
            "connectNulls": true
        },
        {
            "data": [
                { "y": -7.8038549791618, "tooltipLabel": "PTE" },
                { "y": -3.32988974998627, "tooltipLabel": "VAS" },
                { "y": -1.6977913524, "tooltipLabel": "VAS" },
                { "y": -1.5742172985, "tooltipLabel": "VIC" },
                { "y": -1.21077264323422, "tooltipLabel": "VBA" },
                { "y": -0.1701435747, "tooltipLabel": "VAM" },
                { "y": -0.0734110278, "tooltipLabel": "VIL" },
                { "y": -0.057551043, "tooltipLabel": "VES" },
                { "y": -0.0330108867, "tooltipLabel": "VTM" },
                { "y": -0.022080080685649, "tooltipLabel": "VEB" },
                { "y": -0.0122265, "tooltipLabel": "VBS" },
                { "y": -0.0082685988, "tooltipLabel": "MAN" },
                { "y": -0.0059005716, "tooltipLabel": "IGA" },
                { "y": 0, "tooltipLabel": "LPD" },
                { "y": 0, "tooltipLabel": "LTK" },
                { "y": 0, "tooltipLabel": "VAL" },
                { "y": 0, "tooltipLabel": "VIA" },
                { "y": 0, "tooltipLabel": "VIC" }
            ],
            "label": "Q2 20",
            "name": "Q2 20",
            "type": "column",
            "color": "#cea3a6",
            "dashStyle": "Solid",
            "lineType": "Solid",
            "marker": {},
            "connectNulls": true
        }
    ]
}

甚至尝试按类别对系列中的数据数组进行排序——如果这就是 highcharts 文档按 X 升序表示的意思

[
  {
    "y": 0,
    "tooltipLabel": "IGA"
  },
  {
    "y": 0,
    "tooltipLabel": "LPD"
  },
  {
    "y": 0,
    "tooltipLabel": "LTK"
  },
  {
    "y": -0.0666363456,
    "tooltipLabel": "MAN"
  },
  {
    "y": -7.55234464138288,
    "tooltipLabel": "PTE"
  },
  {
    "y": -0.0086822076,
    "tooltipLabel": "VAL"
  },
  {
    "y": 0,
    "tooltipLabel": "VAM"
  },
  {
    "y": -6.26724628978681,
    "tooltipLabel": "VAS"
  },
  {
    "y": -3.58044975748122,
    "tooltipLabel": "VAS"
  },
  {
    "y": -3.37783607784082,
    "tooltipLabel": "VBA"
  },
  {
    "y": -0.0160181769,
    "tooltipLabel": "VBS"
  },
  {
    "y": 0,
    "tooltipLabel": "VEB"
  },
  {
    "y": -0.0464127807,
    "tooltipLabel": "VES"
  },
  {
    "y": 0,
    "tooltipLabel": "VIA"
  },
  {
    "y": -3.1935940773000002,
    "tooltipLabel": "VIC"
  },
  {
    "y": 0,
    "tooltipLabel": "VIC"
  },
  {
    "y": -0.2846235546,
    "tooltipLabel": "VIL"
  },
  {
    "y": -0.1796231514,
    "tooltipLabel": "VTM"
  }
]

但这并没有改变结果

Answer 1

instead highcharts seems to add to the value of the previous column for a category when drawing the stack, ending up with -5.3 + (-9.2) + (-12.0) + (-6.7) = -33.2

这正是堆叠的工作原理，您可以在此处找到更多信息：https://www.highcharts.com/docs/advanced-chart-features/stacking-charts

instead of stacking all the smaller values inside -12.0.

如果要实现此目的，则不应使用 stacking 功能，而应将列位置设置为相互重叠。

演示：https://jsfiddle.net/BlackLabel/e9w4r6h8/

  plotOptions: {
    column: {
      pointWidth: 20,
      groupPadding: 0.5
    }
  },

API: https://api.highcharts.com/highcharts/series.column.groupPadding

highcharts 列堆叠 Y 轴同步 - 值似乎表示为前一列的增加

highcharts column stacking Y axis sync - value seem to be represented as an increase on that of previous column

highcharts

react-highcharts