Highcharts:无法从 Excel 重新创建具有正值和负值的堆积面积图 [英] Highcharts: having trouble recreating stacked area chart from Excel with positive and negative values

问题描述

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

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

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

作为参考，可以在此处找到此图表的小提琴:

您可以在此处找到修改后的小提琴:http://jsfiddle.net/brightmatrix/fjhfxL83/

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

I'm converting a series of Excel charts into Highcharts, and came across a curious situation involving a stacked area chart with both positive and negative values.

Here is now the chart is displayed in Excel, along with the accompanying data points. For illustration purposes, I've selected series G. Despite having all positive values in its data, it appears at the bottom of the stack, beneath the zero line.

Here is how the chart appears in Highcharts (see below). In this instance, series G appears above the chart, and all of the other series appear much differently than in Excel.

For reference, a fiddle of this chart can be found here: http://jsfiddle.net/brightmatrix/woye6xxw/. I've also included a code sample at the bottom of this post.

I've referred to the following questions here on Stack Overflow, but neither of which has been helpful in solving my issue, unfortunately:

• Highcharts - Area Chart - Stacking with series containing negative and positive values
• Highcharts - areaspline with negative values, area should be always at the bottom

Is there an attribute or setting that I'm missing in the API documentation that will permit the chart to draw these series in the same stacking order as in Excel? Is this possible in 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] }
    ]
  })
});

解决方案

After mulling this over the weekend, I tried adding some of the series to different groups (stacks) and was able to achieve what I wanted.

First, I added the two topmost series from the Excel spreadsheet (series E and B in my example) to stack "I" in order from top to bottom. Then, I added the remaining series to a second stack, "II," which appears below the zero line, in order from bottom to top.

Here's the revised series code:

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

The resulting chart matches up very neatly with its Excel progenitor:

You can find a revised fiddle here: http://jsfiddle.net/brightmatrix/fjhfxL83/

I hope this question and answer are helpful to someone out there!

这篇关于Highcharts:无法从 Excel 重新创建具有正值和负值的堆积面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！