Диаграмма C3 с данными JSON

1

Я пытаюсь заполнить диаграмму C3 динамическими данными из базы данных SQL. У меня есть веб-метод С#, который при вызове моего javascript создает следующую строку JSON

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

Я использую следующий javascript для pageload, но получаю ошибку "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 и очень ценю указатель здесь

Спасибо!

Теги:
c3.js

2 ответа

0
Лучший ответ

Вы должны отформатировать свой ответ json, чтобы соответствовать ожидаемому формату C3 для типа графа Donut.

function OnSuccess(response) {
    var data = {};
    var value = [];
    JSON.parse(response).forEach(function(d) {
        data[d.item1] = d.y;
        value.push(d.item1);
    });

    c3.generate({
                data: {
                    json: [data],
                    keys: {
                        value : value
                    },
                    type: 'donut'
                },
                donut: {
                    title: "Approval",
                    width: 40,
                    label: {
                        show: false
                    }
                },
                color: {
                    pattern: ["#ff9800", "#78c350", "#f7531f"]
                }
        })
}

Обычно ваш сервер выводит строку, поэтому использование JSON.parse преобразует эту строку в объект json.

Поделиться
  • 0
    Спасибо за ваш ответ, однако я все еще получаю ту же ошибку ...
  • 0
    взгляните на параметр data.json в c3.generate , я заменил response на data
Показать ещё 4 комментария
0 
function OnSuccess(response) {

    var jsonData = response.d;

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

}
Поделиться
  • 0
    Это отлично работает. Убедитесь, что тип ответа вы получаете ... JSON объект или строку. Я получил строку, которую я сохранил в var jsonData, и преобразовал ее в объект.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню