フォームデータをロードしてサーバーに送信し、返されたデータをグラフ化したいと思います。フォームの入力フィールドにデフォルトのデータがあり、コメントする場合は正常に機能します
//$("button").click(function(){
デフォルトのテキストフィールドが空の場合、すべてのグラフが表示されません。さまざまな方法を試しましたが、ボタンをクリックしてもフォームから読み込まれません。私は今2日間立ち往生しています。助けてください。前もって感謝します。これがコードです
<script type="text/javascript">
var chart = null;
var dataString = [];
$(document).ready(function() {
$("button").click(function() {
$(function() {
var city1 = $("#city1").val();
var city2 = $("#city2").val();
dataString = {
city1: city1,
city2: city2
};
requestData();
});
});
function requestData() {
$.ajax({
url: 'array.php',
type: 'POST',
data: dataString,
success: function(point) {
var chartSeriesData = [];
var chartCategory = [];
$.each(point, function(i, item) {
var series_name = item.name;
var series_data = item.data2;
var cagory = series_name;
var series = {
name: series_name,
data: item.data2
};
chartSeriesData.push(series);
chartCategory.push(series_name);
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
},
title: {
text: 'Real time data from database'
},
xAxis: {
categories: chartCategory
},
yAxis: {
minPadding: 0.1,
maxPadding: 0.1,
title: {
text: 'Value',
margin: 40
}
},
series: chartSeriesData
});
},
cache: false
});
}
});
</script>
これがボディセクションです
<body>
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
<div id="city_form">
<form name="contact" action="" method="post">
<label for="city1" id="city1_label">First city</label>
<input type="text" name="city1" id="city1" size="30" value="Amsterdam" />
<label for="city2" id="email_label">Second city</label>
<input type="text" name="city2" id="city2" size="30" value="London" />
<button>Click me</button>
</form>
</div>
</body>
</html>