Question

我将一系列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] }
    ]
  })
});

Answer 1

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

首先，我从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/

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

Highcharts：无法使用正值和负值从Excel重新创建堆积区域图表

1 个答案: