融合图中堆叠条形图顶部的总值

Question

如何使用融合图在堆叠条形图的顶部显示总值？我无法使用自定义选项。我想在每个小节的顶部显示小节的所有堆栈的总值。这个图是使用融合图表库完成的，是否可以使用D3JS完成相同的图？

代码笔链接：https://codepen.io/sampath-PerOxide/pen/jdWJMK

这是我的代码：

const dataSource = {
"chart": {
"yaxisname": "y axis name",
"flatscrollbars": "0",
"scrollheight": "12",
"numvisibleplot": "8",
"plottooltext": "<b>$dataValue</b> people died because of $seriesName in $label",
"theme": "ocean"
},
"categories": [
{
"category": [
{
"label": "1994"
},
{
"label": "1995"
},
{
"label": "1996"
},
{
"label": "1997"
},
{
"label": "1998"
},
{
"label": "1999"
},
{
"label": "2000"
},
{
"label": "2001"
},
{
"label": "2002"
},
{
"label": "2003"
},
{
"label": "2004"
},
{
"label": "2005"
},
{
"label": "2006"
},
{
"label": "2007"
},
{
"label": "2008"
},
{
"label": "2009"
},
{
"label": "2010"
},
{
"label": "2011"
},
{
"label": "2012"
},
{
"label": "2013"
},
{
"label": "2014"
},
{
"label": "2015"
},
{
"label": "2016"
},
{
"label": "2017"
}
]
}
],
"dataset": [
{
"seriesname": "Hymenoptera",
"data": [
{
"value": "15622"
},
{
"value": "10612"
},
{
"value": "15820"
},
{
"value": "26723"
},
{
"value": "35415"
},
{
"value": "25555"
},
{
"value": "81803"
},
{
"value": "47950"
},
{
"value": "42396"
},
{
"value": "19435"
},
{
"value": "9780"
},
{
"value": "23243"
},
{
"value": "28619"
},
{
"value": "8477"
},
{
"value": "3503"
},
{
"value": "14278"
},
{
"value": "30522"
},
{
"value": "61518"
},
{
"value": "24819"
},
{
"value": "16437"
},
{
"value": "21171"
},
{
"value": "1690"
},
{
"value": "2418"
},
{
"value": "11253"
}
]
},
{
"seriesname": "test name",
"data": [
{
"value": "15622"
},
{
"value": "10612"
},
{
"value": "15820"
},
{
"value": "26723"
},
{
"value": "35415"
},
{
"value": "25555"
},
{
"value": "81803"
},
{
"value": "47950"
},
{
"value": "42396"
},
{
"value": "19435"
},
{
"value": "9780"
},
{
"value": "23243"
},
{
"value": "28619"
},
{
"value": "8477"
},
{
"value": "3503"
},
{
"value": "14278"
},
{
"value": "30522"
},
{
"value": "61518"
},
{
"value": "24819"
},
{
"value": "16437"
},
{
"value": "21171"
},
{
"value": "1690"
},
{
"value": "2418"
},
{
"value": "11253"
}
]
},

{
"seriesname": "Diptera",
"data": [
{
"value": "3622"
},
{
"value": "2612"
},
{
"value": "5820"
},
{
"value": "6723"
},
{
"value": "5415"
},
{
"value": "5555"
},
{
"value": "1803"
},
{
"value": "7950"
},
{
"value": "2396"
},
{
"value": "9435"
},
{
"value": "2780"
},
{
"value": "3243"
},
{
"value": "8619"
},
{
"value": "1477"
},
{
"value": "1503"
},
{
"value": "4278"
},
{
"value": "9522"
},
{
"value": "2518"
},
{
"value": "4819"
},
{
"value": "6437"
},
{
"value": "6171"
},
{
"value": "2690"
},
{
"value": "1418"
},
{
"value": "1253"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "scrollstackedcolumn2d",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});

Answer 1

您可以在图表对象级别使用showSum属性将堆栈图的总和显示为1，下面是一个演示：

"chart": {
"yaxisname": "y axis name",
"flatscrollbars": "0",
"scrollheight": "12",
"numvisibleplot": "8",
"plottooltext": "<b>$dataValue</b> people died because of $seriesName in $label",
"theme": "ocean",
//use this attribute to show the summation
"showSum": "1",
"valuefontcolor": "#000000"
}

https://codepen.io/anon/pen/xMEGJY?editors=1010

Answer 2

您可以选择在该列上方的一列中显示所有堆叠数据图的总和。若要显示所有堆叠数据图的总和，请将showSum属性设置为1。

参考下面给出的代码：

{
"chart": {
"showSum": "1"
},
}

要了解更多信息，请点击此处

Js报价

FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
//Showing the Cumulative Sum of stacked data
"showSum": "1",
"numberPrefix": "$",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "11000"
},
{
"value": "15000"
},
{
"value": "13500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "11400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
}
]
}
}).render();
});