曲线区域填充图多组数据堆叠展示数据显示问题

[coDayer88]

当有多组数据时，显示出现问题，图2只显示单组数据正常；
如图3，3k的数据展示在图表上只有不到1k，该怎么解决呢？

[AAChartModel]

问:

Highcharts, 带有正负数的 area 堆叠图为什么和 带有正负数的 column 堆叠图 的堆积效果不一样?

答:

Highcharts 中，带有正负数的 area 堆叠图和 column 堆叠图的堆积效果确实不一样，这是由于两种图表类型对堆叠的计算方式不同导致的。

Column 堆叠图:

• Column 堆叠图的堆叠方式是绝对值堆叠。也就是说，每一列的高度是该类别所有系列值的绝对值之和。正值向上延伸，负值向下延伸，它们在零值基线处相遇。每个系列的柱子都从前一个系列的顶部（或底部，如果前一个系列的值为负）开始绘制。

Area 堆叠图:

• Area 堆叠图的堆叠方式是相对值堆叠。每个系列的面积图都从前一个系列的 Y 值处开始绘制。这意味着正值会使下一个系列的起始位置更高，而负值会使下一个系列的起始位置更低。最终呈现的效果是各个系列的面积图相互叠加，而不是像 column 图那样在零值基线处汇合。

举例说明：

假设有两个系列 A 和 B，在某个类别下的值分别为：

• A: 2
• B: -1

在 column 堆叠图 中：

• A 的柱子高度为 2，从基线向上延伸。
• B 的柱子高度为 1，从基线向下延伸。
• 两者总高度为 3。

在 area 堆叠图 中：

• A 的面积从 -1 开始，到 1 结束（2 + (-1) = 1）。
• B 的面积从 0 开始，到 -1 结束。

总结：

正是由于这种计算方式的差异，导致了 area 堆叠图和 column 堆叠图在处理正负值时的不同效果。Area 图的堆叠方式更强调数据的累积变化，而 column 图则更清晰地展示每个系列在每个类别下的绝对值大小。

如果您希望在 area 图中实现类似 column 图的堆叠效果，您可以考虑以下几种方法：

1. 将数据预处理: 将每个类别的所有负值系列求和，得到一个负值总和。然后创建一个新的虚拟系列，其值为该负值总和的相反数（即正值）。将这个虚拟系列添加到图表中，并将其堆叠在所有负值系列的下方。这样可以使堆叠的起始位置从零开始。

2. 使用 stacking: 'percent': 百分比堆叠会将所有系列的值转换为相对于总数的百分比，并在填满整个绘图区域的情况下绘制。但这可能会改变数据的视觉呈现方式，并且可能不适合所有情况。

3. 使用多个 Y 轴: 为正值系列和负值系列分别创建一个 Y 轴，并将它们分别绘制在不同的 Y 轴上。这可以避免正负值相互抵消，但会使图表看起来更复杂。

选择哪种方法取决于您的具体需求和数据的特点。

• 2
• 3

PS:

以上内容由我整理自在线 AI 工具.

[AAChartModel]

[AAChartModel]

代码内容如下:

Highcharts.chart('container', {
    chart: {
        type: 'area' //填充图或者柱状图
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
       
    },
       yAxis: {
         gridLineWidth: 1,
         tickInterval: 1,
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            threshold: 0 // 设置基线为 0
        }
    },
series: [{
    name: 'Series 1',
    data: [5, 3, -4, 7, -2, 2]
}, {
    name: 'Series 2',
    data: [2, -2, -1, 3, 5, -1]
}]
});

[AAChartModel]

在线编辑器:

• https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-stacking-area/

[AAChartModel]

参考在线文档:

• https://api.highcharts.com/highcharts/series.area.stacking

[AAChartModel]

如图3，3k的数据展示在图表上只有不到1k，该怎么解决呢？

再结合这部分内容:

• https://api.highcharts.com/highcharts/yAxis.reversedStacks

可以知道, 你这里所说的图表中绿色部分显示的内容, 其实是多组 series 里的 data 数组中元素正负值相加之后显示的效果.

[coDayer88]

非常感谢详尽的回复，我尝试一下方法1和方法3，看能否实现需求