使用jquery中的click（）事件從表單更新Highchart

我有一張圖表，我希望在同一頁面上的表單提交時更新圖表。表達式var chart = new Highcharts.Chart(options)本身很好（繪製圖表）。當我將其放入.click()事件的回調函數中時，當單擊相應的提交按鈕時，更新後的圖在屏幕上閃爍一秒鐘，然後被擦除並替換爲原始圖。使用jquery中的click（）事件從表單更新Highchart

我非常接近做我需要的東西，但我被這個難住了。謝謝你的幫助。

庫：

<link type="text/css" href="css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/highcharts.js"></script>

這裏是JavaScript：

<script> 
    $(function() { 
$("#lines").val(),colors: $("#colors").val(),}, 
var options = { 
    chart : { 
     renderTo : 'container', 
     defaultSeriesType: 'line', 
     zoomType: 'xy' }, 
    title : { text : 'Foo' }, 
    xAxis: { title: { text: 'x label' } }, 
    yAxis: { title: { text: 'y label' } }, 
    series : {} 
} 
    var chart = new Highcharts.Chart(options); 
    $("#submit").click(function() { 
    options.series = [{"name": 10402, "color": "rgba(255,139,0,0.5)", "data": [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}]; 
    var chart = new Highcharts.Chart(options); 
    }); 

    }); 
    </script>

下面是HTML體：

<body> 
<form name="chartform" id="chartform"> 
<input type="submit" id="submit" /><br /> 
</form> 
<div id="container" style="width: 100%; height: 800px"></div> 
</body>

這是推動我堅果。

來源

2012-01-09 f1r3br4nd

這是對我工作的罰款：

var chart; 
$(document).ready(function() { 
    options ={ 
     chart: { 
     renderTo: 'container', 
     defaultSeriesType: 'line', 
     zoomType: 'xy' 
     }, 
       title : { text : 'Foo' }, 
       xAxis: { title: { text: 'x label' } }, 
    yAxis: { title: { text: 'y label' } }, 

     series: {} 
       }; 

    chart = new Highcharts.Chart(options); 
    series3 = [{"name": 10402, "color": "rgba(255,139,0,0.5)", data: [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}]; 
    series2 = [{ 
     name: '1042', 
     color: "rgba(255,139,0,0.5)", 
     data: [[ 146,55.8 ],[150,60.9]] 
     }, { 
     name: '10403', 
      color: "rgba(255,255,0,0.5)", 
     data: [[ 130,25.8 ],[150,54.9]] 
     }]; 
    $("#chartform").submit(function() { 
    options.series = series3; 
    var chart = new Highcharts.Chart(options); 
return false; 
    }); 


});

編輯：我相信問題是，您提交表單。做一個回報假並使用提交處理程序，而不是點擊。你可以住在：http://jsfiddle.net/bCFHL/157/

來源

2012-01-09 22:41:56 Nobita

我找不到格式不正確的地方。 – f1r3br4nd 2012-01-09 23:00:31

@ f1r3br4nd你說得對。問題出在另一部分。我更新應該工作！ – Nobita 2012-01-09 23:29:06

好的，我終於得到了我的運行。如果我在'

使用jquery中的click（）事件從表單更新Highchart

回答

相關問題