带有JSON数据的C3图表

时间:2017-09-11 14:57:47

标签: javascript json c3.js

我正在尝试使用SQL数据库中的动态数据填充C3图表。我有c#web方法,当我的javascript调用时会生成以下JSON字符串

[{"y":"5","item1":"Lion Wharf"},{"y":"31","item1":"Millbrook Park P2"},{"y":"84","item1":"Pinfield Meadows"}]

我在pageload上使用以下javascript但是收到错误“a.forEach不是函数”

      $.ajax({
            type: "POST",
            url: "additions.aspx/GetPiechartData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: "true",
            cache: "false",
            success: function (result) {
                OnSuccess(result.d);
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        function OnSuccess(response) {
            var abc = JSON.stringify(response);
            window.location.replace(response);
            var chart = c3.generate({
                bindto: '#chart-var-project',
                data: {
                    json: response,
                    keys: {
                        x: 'y',
                        value: ['item1']
                    },
                    type: 'donut'
                },
                donut: {
                    title: "Approval",
                    width: 40,
                    label: {
                        show: false
                    }
                },
                color: {
                    pattern: ["#ff9800", "#78c350", "#f7531f"]
                }
        });

我是Javascript的新手,非常感谢这里的指针

谢谢!

2 个答案:

答案 0 :(得分:0)

您必须格式化您的json响应以符合Donut图类型的C3预期格式。

JSON.parse

您的服务器通常会输出一个字符串,因此使用Set getBudgetData = budgetItems(year)会将此字符串转换为json对象。

答案 1 :(得分:0)

function OnSuccess(response) {

    var jsonData = response.d;

    var chart = c3.generate({
        bindto: '#chart-var-project',
        data: {
            json: JSON.parse(jsonData),
        }
    });

}