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

Question

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

Codepen link: 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

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

Total value on top of stacked bars in fusion charts

html

javascript

fusioncharts

d3.js

nvd3.js