HighChart comment utiliser le tableau d'objet

Question

fichier JSON:

[{ 
    "key_as_string": "2017-05-09", 
    "doc_count": 1874 
}, { 
    "key_as_string": "2017-05-10", 
    "doc_count": 2680 
}, { 
    "key_as_string": "2017-05-11", 
    "doc_count": 2717 
}, { 
    "key_as_string": "2017-05-12", 
    "doc_count": 2147 
}, { 
    "key_as_string": "2017-05-13", 
    "doc_count": 984 
}, { 
    "key_as_string": "2017-05-14", 
    "doc_count": 1302 
}, { 
    "key_as_string": "2017-05-15", 
    "doc_count": 2217 
} 

Je ne pouvais pas savoir comment utiliser les données d'objet sur le HighChart

quand je l'utilise

$.getJSON('/data/user_signedup.json', function(data) { 

    options.series[0].name = "NewUser" 
    options.series[0].data = data; 


    console.log("series", options.series); 
    var chart = new Highcharts.Chart(options); 
}); 

alors il Dosen ne fonctionne pas quoi que ce soit: donc je me demande comment utiliser l'ensemble de données d'objet (key_as_string vlaue, match x-value)
(doc_count vlaue, mat ch valeur y)

Je peux dessiner seulement y.value en faisant tableau seul numéro

$.getJSON('/data/user_signedup.json', function(data) { 

    options.series[0].name = "NewUser" 
    options.series[0].data =[]; 
    data.forEach(function(item){ 
     options.series[0].data.push(item.doc_count) 
    }) 
    console.log("series", options.series); 
    var chart = new Highcharts.Chart(options); 
}); 

option graphique mise

$(document).ready(function() { 

var options = { 
    chart: { 
     renderTo: 'container', 
     type: 'spline' 
    }, 
    title: { 
     text: 'Daily New User' 
    }, 

    subtitle: { 
     text: ' 2017-05-09 ~2017-06-08' 
    }, 
    yAxis: { 
      title: { 
       text: 'Number of new Users' 
      } 
     }, 
    xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { // don't display the dummy year 
      month: '%e. %b', 
      year: '%b' 
     }, 
     title: { 
       text: 'Date' 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle' 
     }, 
    tooltip: { 
    headerFormat: '<b>{series.name}</b><br>', 
    pointFormat: '{point.x}: {point.y}명', 
    // maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.key_as_string) + ':<br/> ' + 
    //        this.doc_count + ' visits' 
}, 

plotOptions: { 
    series: { 
    allowPointSelect: true 
    } 
}, 

    series: [{},{},{}] 
}; 

Answer 1

Vous pouvez transmettre des données personnalisées en définissant ensemble de données avec JSON. pour le point de l'axe x, utilisez la touche name et pour le point de l'axe y, utilisez la touche y.

Essayez ceci:

$.getJSON('/data/user_signedup.json', function(data) { 

    options.series[0].name = "NewUser" 
    options.series[0].data =[]; 
    data.forEach(function(item){ 
     options.series[0].data.push({name:key_as_string,y:item.doc_count}) 
    }) 
    console.log("series", options.series); 
    var chart = new Highcharts.Chart(options); 
}); 

et configuration highchart mis à jour ceci:

xAxis: { 
      type: 'category' 
}