htmlテキストボックスの入力をハイチャートグラフに追加

Question

私は、現在の日の活動を取得してグラフに表示する棒グラフを持っています。これは、以下のmyserviceのパラメータとして送信された特定の日に正常に動作します。私は、テキスト入力を通じてグラフ化された日を変更できるようにしたい。下記のgetChartDataメソッドを使用すると、グラフはレンダリングされません。これはなぜでしょうか？

$(function() { 
    var chart; 
    $(document).ready(function() { 
    var options = { 
     chart : { 
     renderTo : 'container', 
     type : 'column' 
     }, 
     title : { 
     text : 'Total by Time', 
     x : -20 //center 
     },    
     xAxis : { 
     categories : ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm', 
      '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm', '12am'] 
     }, 
     yAxis : { 
     min : 0, 
     title : { 
      text : 'Total' 
     }, 
     stackLabels : { 
      enabled : true, 
      style : { 
      fontWeight : 'bold', 
      color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
     } 
     }, 
     tooltip : { 
     formatter : function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      this.x + ': ' + this.y; 
     } 
     }, 
     legend : { 
     layout : 'vertical', 
     align : 'right', 
     verticalAlign : 'top', 
     x : -10, 
     y : 100, 
     borderWidth : 0 
     }, 
     plotOptions : { 
     column : { 
      stacking : 'normal', 
      dataLabels : { 
      enabled : true, 
      color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
      } 
     } 
     }, 
     series : [] 
    };  
    getChartData(); 
    }); 
}); 

function getChartData() { 
    $.getJSON('http://localhost:8080/myservice/2012-03-23', function (data) { 

    options.series = data; 
    // Create the chart 
    var chart = new Highcharts.Chart(options); 
    }); 
} 

Answer 1

を：どのように

parts = window.location.search.substr(1).split("&"); 
var $_GET = {}; 
var custNoPart = parts[0].split("="); 
var dayDatePart = parts[1].split("="); 

var param1 = $_GET[decodeURIComponent(custNoPart[0])] = decodeURIComponent(custNoPart[1]); 

    var param2 = $_GET[decodeURIComponent(custNoPart[1])] = decodeURIComponent(dayDatePart[1]); 

Answer 2

このお試しください：2つのパラメータは、フォームからオーバー送信された場合は、それらのパラメータを取得し、同様にgetChartDataのURLに値を使用することができ提出

$(function() { 
    var chartOptions = { 
    chart : { 
     renderTo : 'container', 
     type : 'column' 
    }, 
    title : { 
     text : 'Total by Time', 
     x : -20 //center 
    }, 
    xAxis : { 
     categories : ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm', 
     '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm', '12am'] 
    }, 
    yAxis : { 
     min : 0, 
     title : { 
     text : 'Total' 
     }, 
     stackLabels : { 
     enabled : true, 
     style : { 
      fontWeight : 'bold', 
      color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
     } 
     } 
    }, 
    tooltip : { 
     formatter : function() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     this.x + ': ' + this.y; 
     } 
    }, 
    legend : { 
     layout : 'vertical', 
     align : 'right', 
     verticalAlign : 'top', 
     x : -10, 
     y : 100, 
     borderWidth : 0 
    }, 
    plotOptions : { 
     column : { 
     stacking : 'normal', 
     dataLabels : { 
      enabled : true, 
      color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
     } 
     } 
    } 
    }; 
    getChartData(chartOptions); 
}); 

function getChartData(chartOptions) { 
    $.getJSON('http://localhost:8080/myservice/2012-03-23', function (data) { 
    chartOptions.series = data; 
    // Create the chart 
    var chart = new Highcharts.Chart(chartOptions); 
    }); 
}