如何使用融合图在堆叠条形图的顶部显示总值？我无法使用自定义选项。我想在每个条形的顶部显示一个条形的所有堆栈的总值。该图是使用融合图表库完成的，是否可以使用 D3 JS 完成相同的图？
Codepen 链接：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();
});
您可以在图表对象级别使用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"
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句