Как заполнить динамическое значение json в детализации highchart

Я пытаюсь динамически заполнить ниже json в развертке highchart, но данные не заполняются, как ожидалось.

Я хотел бы получить всех пользователей и поместить их в график, а в детализации каждого пользователя я должен показать успех, ошибка, отмена, посещение, регистрация, удаление

Я создал сводную диаграмму со статическими данными, пожалуйста, найдите ссылку ниже:

Этот график - мой ожидаемый результат:

http://jsfiddle.net/jqueryb/ndfk7vgd/2/

Мой JSON:

var result=    [
      {
        "userId": "user1",
        "success": 1,
        "error": 0,
        "cancel": 0,
        "visit": 3,
        "enroll": 2,
        "uninstall": 0
      },
      {
        "userId": "user2",
        "success": 2,
        "error": 0,
        "cancel": 0,
        "visit": 4,
        "enroll": 2,
        "uninstall": 0
      },
      {
        "userId": "user3",
        "success": 1,
        "error": 0,
        "cancel": 0,
        "visit": 2,
        "enroll": 1,
        "uninstall": 0
      },
      {
        "userId": "user4",
        "success": 0,
        "error": 0,
        "cancel": 2,
        "visit": 4,
        "enroll": 2,
        "uninstall": 0
      }
    ]

Я пробовал ниже код для динамического заполнения значения в детализации, но не повезло :(

<script type="text/javascript">
    function loadChart(result) {
        var user_data = [];
        $.each(JSON.parse(JSON.stringify(result)), function(idx, obj) {
            user_data.push(['{ name:' + obj.userId + ',y:1}']);
        });
        var test_data = '[' + user_data + ']';
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Basic drilldown'
            },
            xAxis: {
                type: 'category'
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Things',
                colorByPoint: true,
                data: test_data
            }]
        });

    }
</script>

Был бы очень признателен, если бы кто-нибудь помог мне решить эту проблему. Заранее спасибо.


javascript json jquery highcharts drilldown
person jquery beginner    schedule 24.09.2015    source источник
comment
построить свои данные и передать их правильно. вы должны сначала построить данные серии. Кроме того, у вас еще нет данных для детализации.   -  person Hieu Le    schedule 24.09.2015
comment
да, я не строю детализацию, потому что сами данные моих рядов не поступают должным образом, я пытался динамически строить данные рядов, но данные не заполнялись должным образом. Если вы ** test_data ** поступаете динамически, но я делаю что-то не так :(   -  person jquery beginner    schedule 24.09.2015
comment
какие ошибки выдает в консоли?   -  person Hieu Le    schedule 24.09.2015

Ответы (1)


arrow_upward
4
arrow_downward

Из цикла php while, как вы повторяете раздел результатов var ниже, чтобы использовать его в диаграмме, когда результаты var получены из результата запроса?

var result = [
{
    "userId": "user1",
    "success": 1,
    "error": 0,
    "cancel": 0,
    "visit": 3,
    "enroll": 2,
    "uninstall": 0
},
{
    "userId": "user2",
    "success": 2,
    "error": 0,
    "cancel": 0,
    "visit": 4,
    "enroll": 2,
    "uninstall": 0
},

etc...

];

Правильно сформируйте свои данные для хайчартов:

Когда данные находятся в форме json, вы можете просто использовать базовые объекты js для их создания.

Посмотрите, как это работает здесь: http://jsfiddle.net/x934L81p/1/

Создайте данные серии следующим образом:

    var user = {};
    user.name = obj.userId;
    user.y = 1;
    user.drilldown = obj.userId;
    user_data.push(user);

Затем создайте детализацию в том же цикле:

    var drilldown_user = {};
    drilldown_user.id = obj.userId;

    drilldown_user.data = [];        
    drilldown_user.data.push(['success', obj.success]);
    drilldown_user.data.push(['error', obj.error]);
    drilldown_user.data.push(['cancel', obj.cancel]);
    drilldown_user.data.push(['visit', obj.visit]);
    drilldown_user.data.push(['enroll', obj.enroll]);
    drilldown_user.data.push(['uninstall', obj.uninstall]);

    drill_down_data.push(drilldown_user);

Собираем все вместе:

var user_data = [];
var drill_down_data = [];

$.each(JSON.parse(JSON.stringify(result)), function(idx, obj) {
    var user = {};
    user.name = obj.userId;
    user.y = 1;
    user.drilldown = obj.userId;

    user_data.push(user);

    var drilldown_user = {};
    drilldown_user.id = obj.userId;

    drilldown_user.data = [];
    drilldown_user.data.push(['success', obj.success]);
    drilldown_user.data.push(['error', obj.error]);
    drilldown_user.data.push(['cancel', obj.cancel]);
    drilldown_user.data.push(['visit', obj.visit]);
    drilldown_user.data.push(['enroll', obj.enroll]);
    drilldown_user.data.push(['uninstall', obj.uninstall]);

    drill_down_data.push(drilldown_user);

});
person Hieu Le    schedule 24.09.2015