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

查看:538
本文介绍了高图:无法从带有正负值的Excel重新创建堆积面积图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在将一系列Excel图表转换为Highcharts,并遇到一种奇怪的情况,其中涉及具有正值和负值的堆积面积图.

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.

现在这是该图表以及随附的数据点在Excel中显示的图表.为了便于说明,我选择了系列G.尽管其数据中具有所有正值,但它出现在堆栈的底部,零线以下.

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.

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

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.

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

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

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

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.

首先,我从Excel电子表格中添加了两个最顶部的系列(在本例中为E和B系列),以按从顶部到底部的顺序堆叠"I".然后,我将剩余的系列添加到第二个堆栈"II"中,该堆栈显示在下方零线以下,从底部到顶部.

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

生成的图表与其Excel祖先非常整齐地匹配:

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

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

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

我希望这个问题和答案对外面的人有帮助!

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆