同一页面中的多个图表php

时间:2016-05-17 08:26:14

标签: php highcharts

我正在尝试使用highcharts在同一页面中绘制两个图表。但是,只显示了第一个。$ data1,$ data2,$ data3,$ data4,$ data5是某些函数返回的值。

page.php文件:

     <div>
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
     <div id="containerone" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


    <?php

    include 'data.php';
     $data1=data::amountUSD($res['id']);
     $data2=data::amountEUR($res['id']);
     $data3=data::Month($res['id']);
     $data5=data::Totalminutejour($res['id']);

     $data4=data::Day($res['id']);

    ?>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script>
     <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
    $(function() {
        var chart = new Highcharts.Chart({
              chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title:  {
                        text: 'USD VS EUR'
                    },
            xAxis:  {
                        categories: [<?php echo join(',', $data3); ?>]
                    },
              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
            },

            series: [   {
                            name: 'EUR',
                            data: [<?php echo join(',', $data2);  ?>],

                        },
                        {
                            name: 'USD',
                            data: [<?php echo join(',', $data1);  ?>],

                        },

                    ]
        });
   });
    $(function() {
        var chartone = new Highcharts.Chart({
            chart: {
                renderTo: 'containerone',
                type: 'column',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Range Total Minutes every day',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [<?php echo join(',', $data4); ?>]
            },
            yAxis: {
                title: {
                    text: 'Total Minutes'
                },
                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
            },
            series: [{
                            name: 'TotalMinuteDay',
                            data: [<?php echo join(',', $data5);  ?>],

                        },
                    ]


     });   
    });

    </script>



</div>  

这就是print_r返回的内容:

 print_r($data1); // Array ( [0] => 8.800000190734863 [1] => 20 ) 
 print_r($data2); // Array ( [0] => 8.800000190734863 [1] => 2 )
 print_r($data3); // Array ( [0] => 5 [1] => 5 [2] => 4 [3] => 4 )
 print_r($data4); //Array ( [0] => a [1] => d )
 print_r($data5); // Array ( [0] => 0.2 [1] => 0.2 ) 

0 个答案:

没有答案