将表单输入传递到高图表，然后重新生成图表

pass form inputs to highcharts then rebuild chart

本文关键字：然后 新生 高图表 输入 表单      更新时间：2024-05-23

我使用highcharts从数据库中的值表生成图表。我希望能够选择一个日期范围传递到高图表javascript中。

我正在使用jquery日期选择器。因此，这些值被填写在表格中

<form id='myform'>
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
<div class="demo">
<input type="submit" value="Submit">

并希望将其提交给高图表

$(function() {
        new Highcharts.Chart({

这都位于视图中。在脚本标记中。有人能告诉我如何将输入表单中的日期值传递到这个javascript函数中，然后使用用户输入值在页面上重建图表吗？如何访问"to"answers"from"标签，然后刷新图表？

您应该通过访问从输入字段中获取日期

document.getElementById('from').value;

编辑：更好的方法是使用jQuery日期选择器事件：

$('.selector').datepicker({
    onSelect: function(dateText, inst) { ... }
});

并尝试将日期获取为javascript日期对象。

要设置图表轴的范围，可以使用：

chart.xAxis[0].setExtremes(Date.UTC(startYear, startMonth - 1, startDay), Date.UTC(endYear, endMonth - 1, endDay));

在您的提交功能中。设置了轴的极端值后，图表将自动重新绘制。

相关文章：