2015-09-24 3 views
2

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

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

Я создал промоины вниз 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> 

Это было бы очень признателен, если кто-то может помочь мне решить эту проблему. Спасибо заранее.

+0

Создайте свои данные и передайте их правильно. вы должны сначала создать свои данные. Кроме того, вы еще не создали свои данные. –

+0

Да, я не создавал древовидную структуру, потому что сама моя серия данных не срабатывала должным образом, я пытался динамически строить данные серии, но данные не заполнялись должным образом. Если вы ** test_data ** приходят динамически, но я делаю что-то не так :( –

+0

какие ошибки вы получаете в консоли? –

ответ

4

Из цикла 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... 

]; 

Постройте данные правильно для Highcharts:

Когда данные в виде 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); 

}); 
Смежные вопросы