3

我正在将一系列 Excel 图表转换为 Highcharts，并且遇到了一个奇怪的情况，涉及一个包含正值和负值的堆积面积图。

这是现在在 Excel 中显示的图表以及随附的数据点。出于说明目的，我选择了系列 G。尽管其数据中包含所有正值，但它出现在堆栈的底部，位于零线下方。

在此处输入图像描述

这是图表在 Highcharts 中的显示方式（见下文）。在这种情况下，系列 G 出现在图表上方，而所有其他系列的显示方式与 Excel 中的大不相同。

在此处输入图像描述

作为参考，可以在此处找到此图表的小提琴：http: //jsfiddle.net/brightmatrix/woye6xxw/。我还在这篇文章的底部包含了一个代码示例。

我在 Stack Overflow 上提到了以下问题，但不幸的是，这些问题都没有帮助解决我的问题：

我在 API 文档中是否缺少允许图表以与 Excel 中相同的堆叠顺序绘制这些系列的属性或设置？这在 Highcharts 中可能吗？

$(function () {
  Highcharts.chart('container', {
    chart: { type: 'area', },
    title: { text: 'Stacked Area Chart in Highcharts' },
    xAxis: { categories: ['2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'] },
    plotOptions: {
      series: { 
        marker: { enabled: false }, stacking: 'normal'
      },
    },
    series: [
      { name: 'Total', data: [0,0.08,-0.31,-1.09,-1.82,-2.18,-2.49,-3.05,-3.12,-3.15] }, 
      { name: 'A', data: [0,-0.212001,-0.409192,-0.559879,-0.81,-1.089119,-1.313719,-1.606092,-1.808868,-2.041628] }, 
      { name: 'B', data: [0,0.239857,0.637651,0.733988,0.85,0.855423,0.938974,0.912378,1.017854,0.985514] }, 
      { name: 'C', data: [0,-0.096543,-0.271997,-0.512372,-0.70,-0.665893,-0.723534,-0.879249,-0.890587,-0.821584] }, 
      { name: 'D', data: [0,-0.098096,-0.170803,-0.688206,-0.92,-0.918492,-0.876488,-0.967249,-0.954217,-1.029596] }, 
      { name: 'E', data: [0,0.17794,0.31787,0.36,0.37,0.23917,0.17944,0.14766,0.05938,0.24891] }, 
      { name: 'F', data: [0,0.029755,-0.45174,-0.397836,-0.61,-0.56368,-0.593108,-0.462725,-0.351842,-0.210976] }, 
      { name: 'G', data: [0,0.013198,0.055014,0.019322,0.07,0.077394,0.061947,0.010502,0.035015,-0.055604] }
    ]
  })
});
4

1 回答 1

5

在周末仔细考虑之后，我尝试将一些系列添加到不同的组（堆栈）并能够实现我想要的。

首先，我添加了 Excel 电子表格中最顶层的两个系列（在我的示例中为系列 E 和 B）以从上到下的顺序堆叠“I” 。然后，我将剩余的系列添加到第二个堆栈“II”中，该堆栈显示在零线下方，按从下到上的顺序排列。

这是修改后的系列代码：

series: [
  { name: 'Total', type: 'line', data: [0,0.08,-0.31,-1.09,-1.82,-2.18,-2.49,-3.05,-3.12,-3.15] },  
  /* stack I items */
  { name: 'E', stack: 'I', data: [0,0.17794,0.31787,0.36,0.37,0.23917,0.17944,0.14766,0.05938,0.24891] }, 
  { name: 'B', stack: 'I', data: [0,0.239857,0.637651,0.733988,0.85,0.855423,0.938974,0.912378,1.017854,0.985514] }, 
  /* stack II items */
  { name: 'G', stack: 'II', data: [0,0.013198,0.055014,0.019322,0.07,0.077394,0.061947,0.010502,0.035015,-0.055604] },  
  { name: 'F', stack: 'II', data: [0,0.029755,-0.45174,-0.397836,-0.61,-0.56368,-0.593108,-0.462725,-0.351842,-0.210976] }, 
  { name: 'D', stack: 'II', data: [0,-0.098096,-0.170803,-0.688206,-0.92,-0.918492,-0.876488,-0.967249,-0.954217,-1.029596] },
  { name: 'C', stack: 'II', data: [0,-0.096543,-0.271997,-0.512372,-0.70,-0.665893,-0.723534,-0.879249,-0.890587,-0.821584] },
  { name: 'A', stack: 'II', data: [0,-0.212001,-0.409192,-0.559879,-0.81,-1.089119,-1.313719,-1.606092,-1.808868,-2.041628] }
]

生成的图表与其 Excel 祖先非常匹配：

在此处输入图像描述

你可以在这里找到一个修改过的小提琴：http: //jsfiddle.net/brightmatrix/fjhfxL83/

我希望这个问题和答案对那里的人有帮助！

于 2016-12-12T18:17:35.667 回答