使用PHP包含命令的多个Highcharts

时间:2015-06-07 00:56:22

标签: php highcharts

如何使用php include命令将多个高级图表包含在同一页面中?

我试过这个,但它不起作用:

$y=$objective;
$n=count($objective);
    for($i=0; $i<$n; $i++){
        $count[]=$i;
    }
$x=$count;
include("graph.php");
$y=$temp;
$n=count($temp);
for($i=0; $i<$n; $i++){
    $count[]=$i;
}
$x=$count;
include("graph.php");
在“graph.php”中我是这样的:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="../js/jquery.js"></script>

        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">

        var x_data = <?php echo json_encode($x); ?>;
        var y_data = <?php echo json_encode($y); ?>;
$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Title'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        xAxis: {
            //type: 'datetime',
           // minRange: 14 * 24 * 3600000 // fourteen days
           x_data
        },
        yAxis: {
            title: {
                text: 'Variable'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'Data',
           // pointInterval: 24 * 3600 * 1000,
            //pointStart: Date.UTC(2006, 0, 1),
            data: y_data
        }]
    });
});
        </script>
    </head>
    <body>
<script src="Highchart/js/highcharts.js"></script>
<script src="Highchart/js/exporting.js"></script>

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

    </body>
</html>

如果不可能,我该如何解决这个问题?我还可以使用其他方法吗?

由于

1 个答案:

答案 0 :(得分:1)

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

尝试使每个包含的id值不同,例如

$divId = 'container_' . mt_rand( 1, 1000 );

$('#<?php echo $divId;?>').highcharts...

<div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>