$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
name : "mantequila",
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#button').click(function() {
//validamos las fechass
var fecha_inicio = $('#inicio').val();
var fecha_fin = $('#fin').val();
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/",
method: "GET",
data: { fecha_inicio: fecha_inicio, fecha_fin: fecha_fin }
}).done(function(data) {
/* en mi caso esta en duro pero si recibes los valores deberian ser todos
as series por tanto deberia ser algo como
chart.serie = data.serie*/
chart.series[0].setData([129.2, 144.0, 176.0, 135.6,
148.5, 216.4, 194.1, 95.6,
54.4, 29.9, 71.5, 106.4] );
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
fecha inicio<input type="text" id="inicio" name="inicio"/>
fecha fin <input type="text" id="fin" name="fin"/>
<button id="button">Agregar Fecha</button>
$('#button').click(function() {
//validamos las fechass
var fecha_inicio = $('#inicio').val();
var fecha_fin = $('#fin').val();
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/",
method: "GET",
data: { fecha_inicio: fecha_inicio, fecha_fin: fecha_fin }
}).done(function(data) {
/* en mi caso esta en duro pero si recibes los valores deberian ser todos
as series por tanto deberia ser algo como
chart.serie = data.serie*/
chart.series[0].setData([129.2, 144.0, 176.0, 135.6,
148.5, 216.4, 194.1, 95.6,
54.4, 29.9, 71.5, 106.4] );
});
});
});
我想你想在 highcharts 中传递日期并更新你的图表。如果这是这里的例子:
http://jsfiddle.net/5dszcfq7/1/ 如果你想通过你的代码在wordpres中刷新它是以下(我没有尝试过,我只是为了逻辑):
好吧,@JackNavaRow 的回答帮助我澄清了我的疑问。
解决方案在以下代码块中:
第一部分是一个 Html5 表单,通过 post 方法将用户选择的日期发送到 php。在第二部分中,使用 php 变量 $fechaini 和 $fechafin 捕获日期
最后,这些变量用于 SQL 语句BETWEEN '$fechaini' AND '$fechafin'
如果您想要做的是当用户更改图表更新日期时。你应该做的是有 2 个页面:第一个页面包含用户将要操作的日期范围,第二个页面嵌入在第一个页面中并接收日期变量,这样当用户更改范围时,你可以对包含 Highchart 脚本的页面。这是我很久以前为一个项目所做的。
希望对你有帮助,问候。