使用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

回答

相关问题