具有 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('
 示例2：看一下此处。基本上创建图表的新实例，然后在 success 函数中调用 addSeries() 。
);

   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：看一下此处。基本上创建图表的新实例，然后在 success 函数中调用 addSeries() 。