Highcharts具有由PHP生成的HTML表填充的数据 - 只有一个将加载

Question

我有一个我使用php/mysql构建的程序，用户可以在开始时选择其他选项，例如比较特定日期范围的数据或按年份比较年份通过选择要比较的年份来年数据。一旦用户选择一个选项并输入日期范围或选择要比较的年份，我就会使用PHP从MySQL数据库中提取数据并将其显示在HTML表中。所有HTML均使用PHP生成。

我设置了HighCharts来使用HTML表中的数据来生成图表，通过在PHP块下方包含一组功能。问题是，我首先放置的图表函数将生成。

下面的图表功能

例如，当我将日期范围图表放在脚本中时，当用户选择日期范围选项时，这些图表将在页面上生成。但是，如果他们选择同比选项，则该图表将不会显示。如果我在脚本中切换图表功能的顺序，则当用户选择日期范围功能时，他们会获取所有HTML表，但没有图表，而如果他们选择逐年选项，则图表显示了良好。p>我的代码中有些矛盾，但我无法弄清楚我要去哪里。谁能帮忙？

<?php
if ($option == 'opt1') {
print "<div id='hour_chart' style='height:400px;width:100%;'></div>";
print "<div id='hour_data'><strong>Body Counts by Hour</strong>";
print "<table class='results_table table2excel' id='byhour'>";
print "<thead><tr><th>Hour</th>";
print $hour1a;
print "</tr></thead><tbody>";
print "<tr><th>Range 1</th>" . $hour1b . "</tr>";
print "</tbody></table><br><br><br></div>";
print "<button  class='submitex' onclick="tablesToExcel(['rangeTable','byhour','byday','bymonth','bylocation'], ['DateRangeTotals','CountsByHour','CountsByDay','CountsByMonth','CountsByLocation'], 'BodyCounts.xls', 'Excel')">Export to Excel</button>";
}
if ($option == 'opt2') {
print "<div id='year_chart' style='height:400px;width:100%;'></div>";
print "<div id='year_data'><strong>Body Counts by Academic Year</strong>";
print "<table class='results_table table2excel' id='byyear'>";
print "<thead><tr>";
print $ay1;
print "</tr></thead><tbody>";
print "<tr>" . $ay2 . "</tr>";
print "</tbody></table><br><br><br></div>";
print "<button class='submitex' onclick="tablesToExcel(['byyear'], ['CountsByAcademicYear'], 'BodyCounts.xls', 'Excel')">Export to Excel</button>";
}
?>
<script>
$(function () { 
    Highcharts.chart('year_chart', {
    data: {
        table: 'byyear',
        switchRowsAndColumns: true
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Body Counts by Academic Year'
    },
    colors: ['#272264','#6AF9C4'],
     yAxis: {
        allowDecimals: false,
        title: {
            text: 'Counts'
        }
    },
       tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.name.toLowerCase() + '<br>' + this.point.y;
        }
    }
});
});
$(function () { 
    Highcharts.chart('hour_chart', {
    data: {
        table: 'byhour',
        switchRowsAndColumns: true
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Body Counts by Hour'
    },
    colors: ['#005481','#ED561B'],
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Counts'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.name.toLowerCase() + '<br>' + this.point.y;
        }
    }
});
});
</script>

Answer 1

我不知道您的所有代码，但我不知道$option在同一时间内如何等于2个不同的值-opt1和opt2-因此您可以更改JavaScript代码不生成这样的错误：

<script>
<?php if ($option == 'opt2') : ?>
$(function () { 
    Highcharts.chart('year_chart', {
    data: {
        table: 'byyear',
        switchRowsAndColumns: true
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Body Counts by Academic Year'
    },
    colors: ['#272264','#6AF9C4'],
     yAxis: {
        allowDecimals: false,
        title: {
            text: 'Counts'
        }
    },
       tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.name.toLowerCase() + '<br>' + this.point.y;
        }
    }
});
<?php elseif ($option == 'opt1') : ?>
});
$(function () { 
    Highcharts.chart('hour_chart', {
    data: {
        table: 'byhour',
        switchRowsAndColumns: true
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Body Counts by Hour'
    },
    colors: ['#005481','#ED561B'],
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Counts'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.name.toLowerCase() + '<br>' + this.point.y;
        }
    }
});
});
<?php endif; ?>
</script>

Answer 2

除了 @core972所说的话外，您还可以决定要显示哪些HTML元素。示例性index.php文件：

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>    
        <?php
        $option = "opt1";
        ?>
        <?php if($option == "opt1") { ?>
            $(function () {
                Highcharts.chart('hour_chart', {
                    //data: {
                    //    table: 'byhour',
                    //    switchRowsAndColumns: true
                    //},
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Body Counts by Hour'
                    },
                    colors: ['#005481','#ED561B'],
                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: 'Counts'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                this.point.name.toLowerCase() + '<br>' + this.point.y;
                        }
                    },
                    // dummy data
                    series: [{
                        data: [1, 2, 3, 4, 5]
                    }]
                });
            });
        <?php } elseif($option == "opt2") { ?>
        $(function () { 
            Highcharts.chart('year_chart', {
                //  data: {
                //      table: 'byyear',
                //      switchRowsAndColumns: true
                //  },
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Body Counts by Academic Year'
                },
                colors: ['#272264','#6AF9C4'],
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Counts'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.name.toLowerCase() + '<br>' + this.point.y;
                    }
                },
                // dummy data
                series: [{
                    data: [5, 4, 3, 2, 1]
                }]
            });
        });
        <?php } ?>
    </script>
    </head>
    <body>
        <?php if($option == "opt1") { ?>
            <div id='hour_chart' style='height:400px;width:100%;'></div>
            <div id='hour_data'><strong>Body Counts by Hour</strong>
                <table class='results_table table2excel' id='byhour'>
                    <thead>
                        <tr>
                            <th>Hour</th>
                            <!-- print $hour1a; -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Range 1</th>
                            <!-- " . $hour1b . " -->
                        </tr>
                    </tbody>
                </table>
                <br><br><br>
            </div>
            <button  class='submitex' onclick="tablesToExcel(['rangeTable','byhour','byday','bymonth','bylocation'], ['DateRangeTotals','CountsByHour','CountsByDay','CountsByMonth','CountsByLocation'], 'BodyCounts.xls', 'Excel')">Export to Excel</button>
        <?php } elseif($option == "opt2") { ?>
            <div id='year_chart' style='height:400px;width:100%;'></div>
            <div id='year_data'><strong>Body Counts by Academic Year</strong>
                <table class='results_table table2excel' id='byyear'>
                    <thead>
                        <tr>
                            <!-- print $ay1; -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <!-- " . $ay2 . " -->
                        </tr>
                    </tbody>
                </table>
                <br><br><br>
            </div>
            <button class='submitex' onclick="tablesToExcel(['byyear'], ['CountsByAcademicYear'], 'BodyCounts.xls', 'Excel')">Export to Excel</button>
        <?php } ?>
    </body>
</html>