Линейный график со значениями 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 (не пробовал, просто запоминаю структуру диаграммы):

// 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 : посмотрите здесь . В основном создайте новый экземпляр диаграммы и затем вызовите addSeries() внутри функции успеха.