我完全理解this部分,但现在我有更多不同的怀疑:
如何实施draggable plugin?通过json或首先构建整个图表然后解析数据?
以下是我使用此插件的结果如下:
$.getJSON("data.php", function(data) {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginRight: 130,
marginBottom: 25
},
title: {
text: '<?php echo strftime("%A %d de %B del %Y"); ?><?php echo " Turno:" . $turno; ?> ',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
text: 'powered by restaurax.com',
href: 'http://www.restaurax.com'
},
labels: {
items: [{
html: 'PAX/TURNO',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
tooltip: {
formatter: function() {
return Math.round(this.y);
}
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: data
});
});
});
使用上面的代码draggable工作正常,但我还需要设置这段代码:
{
type: 'spline',
name: 'Max Pax',
data: [],
draggableY: true,
dragMinY: 0,
dragMaxY: 200,
cursor: 'ns-resize',
point: {
events: {
drag: function(e) {
// Returning false stops the drag and drops. Example:
/*
if (e.newY > 300) {
this.y = 300;
return false;
}
*/
$('#guardar').html(' <b> GUARDAR CAMBIOS </b>');
$('#guardar').css({ "backgroundColor":"red", "color": "black"});
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> to <b>' +
Highcharts.numberFormat(e.newY, 2) + '</b>'
);
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> was set to <b>' +
Highcharts.numberFormat(this.y, 2) + '</b>'
);
}
我应该在json文件中设置它吗?如果没有,我应该在哪里或如何设置这个代码?
上一个/下一个按钮:
假设前一部分终于正常工作,那么我需要能够向php文件发送一个参数来检索下一个或上一天,当然,重绘图表。它看起来像:
$('#next').click(function() {
$.getJSON("data.php$MYPARAMETER", function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
}