Линейная диаграмма с значениями x и y

Question

Я пытаюсь построить свой первый график (диаграмма линий). Я добрался до оси x и y и названия линии. Однако, когда я пытаюсь нажать данные, он не отображается. Он отображает только пустую страницу. Вот мой код, может ли кто-нибудь помочь?

$(document).ready(function() { 
    var Options = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'line', 
      marginRight: 130, 
      marginBottom: 40 
     }, 
     title: { 
      text: 'Weight-for-age percentiles:', 
      x: -20 
     }, 
     subtitle: { 
      text: 'boys, 5 to 19 years', 
      x: -20 
     }, 
     xAxis: { 
      title: { 
       text: 'Age (Years)' 
      }, 
      min:5, 
     }, 
     yAxis: { 

      title: { 
      text: 'Weight (Kg)' 
      }, 
      min: 5, 

     }, 
     tooltip: { 
      formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +'Kg.'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [ ] 
    }); 

    // Ajax call:-  

    $.get('Newchart.aspx', function(data) { 

     var fulldata = document.getElementById("MyHiddenField").value;      
     var lines = fulldata.split('$');      
     var Series = { 
      data: []        
     }; 


    $.each(lines, function(lineno, line){         

     \\i.e line[0] ="Red#[5.4,13.7235931],[7.3,15.10509471],[8,16.95593574]" 
     \\ line[1]="Green#[5,14.7235931],[6,16.36275897],[7,18.10509471]" 
     \\ line[2]="Black#[5,15.09371211],[6,16.79146158],[7,18.58739757]" 
     \\ where Red,Green,Black are the names of the line and rest is [x,y].... 

    }); 
});    

// The HTML:- 

<div> 
    <div id="container" style="width: 950px; height: 500px; margin: 0 auto"> 
    </div> 
    <input type="hidden" id="MyHiddenField" name="MyHiddenField" value="Red#[5.4,13.7235931],[7.3,15.10509471]$Green#[5,14.7235931],[6,16.36275897],[7,18.10509471]$Black#[5,15.09371211],[6,16.79146158],[7,18.58739757]" /> 
</div> 

Любые примеры/код были бы очень признательны!

Заранее спасибо ..

Answer 1

Двухсторонний добавления серии к диаграмме:

1. Создать всю таблицу, когда Ajax вызов завершается успешно (создавая тем самым серию предварительно вызвать new Highcharts.Chart), см код ниже
2. Программного добавления точек к (уже) оказанной диаграмме

Пример 1 (не пробуйте это, я просто вспомнить график struncture):

// Create the options object without calling New Highcharts.Chart 
var Options = { chart: { renderTo: 'container' } }; 

$.get('Newchart.aspx', function(data) { 
    var fulldata = document.getElementById("MyHiddenField").value; 
    var lines = fulldata.split('$'); 

    var series = []; // Array of series to be filled 

    // Then loop each line and create one series for each line 
    $.each(lines, function(lineno, line) { 
     // Extract name and x/y values (e.g. [[x1, y1], [x2, y2]] from current line 
     var name, values; 
     var current = { name : name, data : values }; 
     series.push(current); // Push current series 
    }); 

    // Inizialize the chart 
    Options.series = series; 
    var chart = new Highcharts.Chart(Options); 
}); 

Пример 2: посмотрите here. В основном создайте новый экземпляр диаграммы, а затем вызовите внутри функции успеха.