使用jquery中的click（）事件从表单更新Highchart [英] Updating a Highchart from a form with a click() event in jquery
问题描述
我有一张图表，我希望在同一页面上的表单提交时更新。 var chart = new Highcharts.Chart（options）表达式可以自行工作（绘制图表）。当我将它放入 .click（）事件的回调函数中时，当我单击相应的提交按钮时，更新后的图在屏幕上闪烁一秒钟，然后擦除并取代原来的情节。
I have a chart that I would like to update whenever a form on the same page is submitted. The var chart = new Highcharts.Chart(options) expression works fine by itself (it draws a chart). When I put it inside the callback function for the .click() event, when I click the corresponding submit button, the updated plot flashes on the screen for a second and is then erased and replaced by the original plot.
我非常接近我所需要的，但我被这个难住了。
I'm so close to doing what I need to, but I'm stumped by this. Thanks for your help.
图书馆：
<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：
Here is the 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主体：
Here is the HTML body:
<body>
<form name="chartform" id="chartform">
<input type="submit" id="submit" /><br />
</form>
<div id="container" style="width: 100%; height: 800px"></div>
</body>
这真让我疯狂。
This is driving me nuts.
推荐答案
这对我来说很合适：
This is working fine for me:
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;
});
});
编辑：我相信问题在于您要提交表单。做一个返回 false 并使用提交处理程序而不是点击。你可以住在这里： http://jsfiddle.net/bCFHL/157/
I believe the problem is that you are submitting the form. Do a return false and use submit handler instead of click. You can check it live in: http://jsfiddle.net/bCFHL/157/
这篇关于使用jquery中的click（）事件从表单更新Highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
