如何将数组数据添加到FusionCharts中

时间:2016-09-06 05:10:35

标签: jquery arrays fusioncharts

我创建API以从服务器检索数据,然后循环到每个数据。我接下来要做的就是将数据显示到FusionCharts中。从服务器检索的数据适合我需要的数据。

如何创建一个我已经使FusionCharts可以输入数据的数组,以便用下面的代码显示?

function URLSitePath() {
    var siteUrl = document.location.origin;
    return siteUrl;
}
$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: URLSitePath() + '/report/apigetdatapermonth',
        dataType: 'json',
        cache: true,
        async : true,
        success: function(result) {
            var arr = [];
            $.each(result.items, function() {
                arr.push({
                    label:this.month,
                    value:this.total_subs
                });
            });

            FusionCharts.ready(function () {
            var revenueChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '100%',
                height: '350',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "Transvision subscribe via website",
                        "xAxisName": "Month",
                        "yAxisName": "Total Subs",
                        "numberPrefix": "",
                        "paletteColors": "#0075c2",
                        "bgColor": "#ffffff",
                        "borderAlpha": "20",
                        "canvasBorderAlpha": "0",
                        "usePlotGradientColor": "0",
                        "plotBorderAlpha": "10",
                        "placevaluesInside": "1",
                        "rotatevalues": "1",
                        "valueFontColor": "#ffffff",
                        "showXAxisLine": "1",
                        "xAxisLineColor": "#999999",
                        "divlineColor": "#999999",
                        "divLineIsDashed": "1",
                        "showAlternateHGridColor": "0",
                        "subcaptionFontBold": "0",
                        "subcaptionFontSize": "14"
                    },
                    "data": [arr]
                }
            }).render();
            });

        },
        error: function(xhr, textStatus, errorThrown) {
            alert('Error.');
        }
    });
});

通常,FusionCharts需要将数据放入像

这样的数组中
{
    "label": "Jan",
    "value": "100"
},
{
    "label": "Feb",
    "value": "200"
},
{
    "label": "Mar",
    "value": "300"
}

如何获取arr变量上的数据可以显示在FusionCharts的数据部分?我通过提供代码"data": [arr]直接尝试但失败了。

由于

1 个答案:

答案 0 :(得分:2)

您可以像这样将数组发送到FusionCharts

var arr = [{
    "label": "Jan",
    "value": "100"
},
{
    "label": "Feb",
    "value": "200"
},
{
    "label": "Mar",
    "value": "300"
}]

然后在融合图表数据中传递"data" = arr

有关详细信息,请参阅此fiddle