highcharts,json数据:line和column:II现在有插件可拖动和下一个previows按钮

时间:2014-01-20 12:56:30

标签: php json button plugins highcharts

我完全理解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);
}

0 个答案:

没有答案