Highcharts:使用正值和负值从 Excel 重新创建堆积面积图时遇到问题
Highcharts: having trouble recreating stacked area chart from Excel with positive and negative values
我正在将一系列 Excel 图表转换为 Highcharts,并遇到了一个奇怪的情况,涉及具有正值和负值的堆叠面积图。
这里是 Excel 中现在显示的图表以及随附的数据点。出于说明目的,我选择了 G 系列。尽管其数据中的所有值为正值,但它出现在堆栈底部,零线下方。
图表在 Highcharts 中的显示方式如下(见下文)。在这种情况下,G 系列出现在图表上方,所有其他系列的外观与 Excel 中的大不相同。
作为参考,可以在此处找到此图表的 fiddle:http://jsfiddle.net/brightmatrix/woye6xxw/。我还在 post.
的底部包含了一个代码示例
我在 Stack Overflow 上提到了以下问题,但不幸的是,这两个问题都没有帮助解决我的问题:
- 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 中可行吗?
$(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] }
]
})
});
在周末仔细考虑之后,我尝试将一些系列添加到不同的 组(堆栈) 并且能够实现我想要的。
首先,我将 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 的前身非常匹配:
您可以在此处找到修改后的 fiddle:http://jsfiddle.net/brightmatrix/fjhfxL83/
我希望这个问题和答案对外面的人有帮助!
我正在将一系列 Excel 图表转换为 Highcharts,并遇到了一个奇怪的情况,涉及具有正值和负值的堆叠面积图。
这里是 Excel 中现在显示的图表以及随附的数据点。出于说明目的,我选择了 G 系列。尽管其数据中的所有值为正值,但它出现在堆栈底部,零线下方。
图表在 Highcharts 中的显示方式如下(见下文)。在这种情况下,G 系列出现在图表上方,所有其他系列的外观与 Excel 中的大不相同。
作为参考,可以在此处找到此图表的 fiddle:http://jsfiddle.net/brightmatrix/woye6xxw/。我还在 post.
的底部包含了一个代码示例我在 Stack Overflow 上提到了以下问题,但不幸的是,这两个问题都没有帮助解决我的问题:
- 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 中可行吗?
$(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] }
]
})
});
在周末仔细考虑之后,我尝试将一些系列添加到不同的 组(堆栈) 并且能够实现我想要的。
首先,我将 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 的前身非常匹配:
您可以在此处找到修改后的 fiddle:http://jsfiddle.net/brightmatrix/fjhfxL83/
我希望这个问题和答案对外面的人有帮助!