如何使用Jquery将我的对象的值添加到Highchart

时间:2014-11-01 03:19:57

标签: jquery html highcharts

我已经从我的对象中获取了值,并且我想在单击Graph按钮时在我的Highchart中显示它但我不知道如何在我的图表中显示它是我的代码

在HTML中

<button id="myBtn" class="btn">Add Entry</button>
<div id="myForm"></div><br/>
<button id="btnGraph" class="btn">Graph</button>
<div id="myGraph"></div>
<div id="new"></div>

在jquery中

$(document).ready(function()
{
    $('#btnGraph').prop('disabled', true);

    $("#myBtn").click(function()
    {
        $('#btnGraph').prop('disabled', true);
        addCountry();
    });

    $(document).on("keyup blur", "input[type^='text']", function()
    {
        var empty = false;

        $("input[type^='text']").filter(function()
        {
             if($(this).val().trim()=='')
                 empty = true;      
        });

        $('#btnGraph').prop('disabled', empty);
    });

    $("#btnGraph").click(function()
    {
         graphPopulation();
    });
});

function graphPopulation()
{
    var arrayForSeries = [];
    var counter = $("[id^=country]").length;

    for (var i = 1; i <= counter; i++) 
    {
        var series = {};
        var n = $('#country-' + i).val();
        var d = parseInt($('#population-' + i).val());

        series.name = n;
        series.data = [d];
        arrayForSeries.push(series);
    }

    $("#new").html("<br/>"+JSON.stringify(arrayForSeries));
    //The value of "#new" depends on the user I just show it to have an idea what are the values that i get, input example
    //[{"name":"Canada","data":[49]},{"name":"Denmark","data":[83]},{"name":"Malta","data":[48]},{"name":"South Africa","data":[42]}]

    $('#myGraph').highcharts(
    {
        chart: {type: 'column'},
        title: {text: 'Population 2014'},
        subtitle: {text: 'Population Chart'},
        xAxis: {categories: ['Population(2014)']},
        yAxis: {min: 0, title: {text: 'Population'}},
        tooltip: {valueSuffix: ' people'},
        plotOptions: {column: {pointPadding: 0.2, borderWidth: 0}},

        //I need to put it in my chart so the format should be
        //series: [{"name":"Canada","data":[49]},{"name":"Denmark","data":[83]},{"name":"Malta","data":[48]},{"name":"South Africa","data":[42]}]

        series: JSON.stringify(arrayForSeries))
    });
}

我希望你能帮助我,我的问题只是在高图中插入用户数据..

1 个答案:

答案 0 :(得分:1)

简单地删除JSON.stringify中要传递数组而不是字符串的var result = JSON.stringify(arrayForSeries);。删除stringify应该可以解决您的问题。 见http://jsfiddle.net/s8p2rg2c/2/