如何按总和字段检索组以在 Amcharts 中显示气球文本

Question

我是Amcharts的新手，请告诉我我做错了什么。

这是我的 javascript 代码。

var chartData1 = [];


 generateChartData();

 function generateChartData() {

        var month = new Array();
        month[0] = "Jan";
        month[1] = "Feb";
        month[2] = "Mar";
        month[3] = "Apr";
        month[4] = "May";
        month[5] = "Jun";
        month[6] = "Jul";
        month[7] = "Aug";
        month[8] = "Sep";
        month[9] = "Oct";
        month[10] = "Nov";
        month[11] = "Dec";

        for (var i = 0; i < 12; i++) {


        var monthName = month[i];
        var year = "2016";

        var newdateFormat = monthName + " " + year  ;
        var numofDocuments = Math.round(Math.random() * (10));
        var amount = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

    chartData1.push({
        chartcol: newdateFormat,
        value: amount,
        volume: numofDocuments
    });

}
}

setTimeout(function () {

console.log(chartData1);

var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",
    dataSets: [
        {
            title: "first data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value",
            }, {
                fromField: "volume",
                toField: "volume",
            }],
            dataProvider: chartData1,
            categoryField: "chartcol",
            color: ["#FF3300", "#000000"],
        }],

    panels: [{
        showCategoryAxis: false,
        title: "Value",
        percentHeight: 70,

        stockGraphs: [{
            id: "g1",
            title: "Amount",
            valueField: "value",
            comparable: false,
            bullet: "round",
            compareField: "value",
            balloonText: "<div>"+
                            "<div>"+
                                 "<div style='border:5px solid #3388FF; width:2px; display:inline-block; white-space:nowrap'>" +
                                 "</div>" +
                                    " Amount:<b>[[value]]</b>" +
                             "</div>" +
                             "<br />" +
                             "<div>" +
                                 "<div style='border:5px solid #FF3300; width:2px; display:inline-block; white-space:nowrap'>" +
                                 "</div>" +
                                    " Number of Documents:<b>[[volume]]</b>" +
                                  "</div>"+
                             "</div>" +
                         "</div>",
            compareGraphBalloonText: "Amount:<b>[[value]]</b>",
            "useDataSetColors": false,
            "lineColor": "#3388FF",
        }, {
            title: "Documents",
            valueField: "volume",
            showBalloon: false,
            comparable: false,
            periodValue: "Open",
            compareField: "volume",
            lineAlpha: 0,
            includeInMinMax: false,
        }],

        stockLegend: {
            periodValueTextComparing: "[[percents.value.close]]%",
            periodValueTextRegular: "[[value.close]]"
        }
    },

      {
          title: "Volume",
          percentHeight: 30,
          stockGraphs: [{
              valueField: "volume",
              type: "column",
              periodValue:"Open",
              showBalloon: false,
              fillAlphas: 1
          }]
      }
    ],

    "categoryAxesSettings": {
        "maxSeries": 1,
        "groupToPeriods": ["MM"]
    },

    chartScrollbarSettings: {
        graph: "g1"
    },

    chartCursorSettings: {
        valueBalloonsEnabled: true
    },

    dataSetSelector: {
        position: "left"
    },
    "export": {
        "enabled": true
    }
});


chart.validateData();


}, 100)

我的 Html 代码 Index.cshtml（默认 asp.net mvc 页面在 _layout.cshtml 中共享布局，其中我包含了对上面显示的 js 文件的引用）

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 500px;"></div>

我可以生成图表，但 ballonText 不包含该值，您可以查看标题中显示的图像

Answer 1

您可以使用 balloonFunction:

而不是 balloonText

balloonFunction: function(dataItem) {
     return "Amount: <b>" + dataItem.dataContext.dataContext.value + "</b><br>" +
            "Documents: <b>" + dataItem.dataContext.dataContext.volume + "</b>";
}

工作演示：https://jsfiddle.net/LukaszWiktor/uLvd8fwq/

如何按总和字段检索组以在 Amcharts 中显示气球文本

How to retrieve groupby sum field to show balloonText in Amchart

javascript

grouping

amcharts