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

向图表添加系列的双向：

当ajax调用成功结束时创建整个图表（因此在调用new Highcharts.Chart之前创建系列），请参阅下面的代码
以编程方式将点添加到（已）渲染图表

示例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 ：看看here。基本上创建一个新的图表实例，然后在成功函数内调用addSeries()。

带有x和y值的折线图

1 个答案: