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

问题描述 投票：0回答：1

我有以下图表（如下图）

我是否理解堆叠不正确？ y轴值范围不应该是[-12, -1]？

current result

而是在绘制堆栈时，高图表似乎会添加到类别的上一列的值中，以-5.3 +（-9.2）+（-12.0）+（-6.7）= -33.2结尾，因此将该列绘制到33.2 y轴坐标，而不是将所有较小的值堆叠在-12.0内部。

这是我的配置

我的数据按y排序（请参见下面的代码），highcharts的文档中提到了此内容

启用堆栈时，数据必须按X升序排序。

{
    "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"
  }
]

但是那并没有改变结果

highcharts react-highcharts
1个回答
0
投票

相反，在绘制堆栈时，highcharts似乎会添加到类别的上一列的值，最后以-5.3 +（-9.2）+（-12.0）+（-6.7）= -33.2]

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

而不是在-12.0内堆叠所有较小的值。

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

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.