Question

我希望使用mysql数据渲染多个图表，根据特定搜索，会有更多或更少的图表。我已经成功创建了一个图表，我的php文件很好地回应了所需的json格式。

现在，我想要的是能够循环一个数组并根据被解析为php的数组vales绘制新的图表，这反过来又提供了不同的json数据。

顺便说一下，我的javasript是非常有限的所以这里是我的代码和想法：

<script type="text/javascript">
    $(function () {
        var chart;
        var venue = <?php echo json_encode($venue_name); ?>; /* parsed to php file */
        var distances = <?php echo json_encode($data); ?>; /* array to be looped over */
        $(document).ready(function() {

            var options = {
                    ....
                series: []
                    ....
             };

             //
            $.each(distances, function() {
               $.each(this, function(name, value) {
               // do some ajax magic here:... 
                GET 'myphpfile.php?venue='+venue+'&'+distances

                  function drawNewChart(){
                      $('#mainSite').append('<div id="container" style="float:left; display:inline"></div>');

                chart = new Highcharts.Chart(options); 
        });
    });        

    </script>

我学到的是我无法循环包含完整的php和jquery的包含php文件......

Answer 1

这将创建其他图表。每当你想要创建新图表时，你必须像我chart2

那样给出新的名称图表

粘贴下面这个，它会给你其他图表。

   <script type="text/javascript">
$(function () {
    var chart2;
    var venue2 = <?php echo json_encode($venue_name); ?>; /* <---use other variable here of $venue_name */
    var distances2 = <?php echo json_encode($data); ?>; /* <---use other variable of $data */
    $(document).ready(function() {

        var options = {
                ....
            series: []
                ....
         };

         //
        $.each(distances2, function() {
           $.each(this, function(name, value) {
           // do some ajax magic here:... 
            GET 'myphpfile.php?venue2='+venue2+'&'+distances2

              function drawNewChart(){
                  $('#mainSite').append('<div id="container" style="float:left; display:inline"></div>');

            chart2 = new Highcharts.Chart(options); 
    });
});        

</script>

Answer 2

您可以将图表推送到数组，而不是使用许多变量。

var charts = [];
charts.push(new Highcharts(options));

然后你可以避免使用索引等。

一页上有多个高级图表

2 个答案: