將HTML文本框中的輸入添加到高圖中

Question

我有一個條形圖，我想要獲取當天的活動並將其顯示在圖中。這適用於以下作爲參數發送給m​​yservice的特定日期。我希望能夠通過文本輸入更改當天的圖形。使用下面調用的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

如果兩個參數是從一種形式發送的提交，你可以得到這些參數，並使用該值在getChartData網址，如：

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

試試這個：

$(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); 
    }); 
}