Javascript 由php生成的html表填充数据的Highcharts-仅加载一个

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

我设置了Highcharts，通过在php块下面包含一组函数，使用html表中的数据生成图表。问题是，我首先放置的图表函数将生成，而下面的函数则不会

例如，当我在脚本中首先放置日期范围图表时，当用户选择日期范围选项时，这些图表将在页面上生成。但是，如果他们选择了按年计算选项，该图表将不会显示。如果我在脚本中切换图表函数的顺序，那么当用户选择日期范围函数时，他们会得到所有的html表格，但没有图表，而如果他们选择year by year（按年）选项，图表会显示得很好

我的代码中存在冲突，但我无法找出哪里出了问题。有人能帮忙吗

<?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>

---

我不知道您编写的所有代码，但我不知道
$option
如何可以同时等于两个不同的值-
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>


$（函数（）{
Highcharts.图表（“年度图表”{
数据：{
表：'按年'，
switchRowsAndColumns：true
},
图表：{
类型：“列”
},
标题：{
正文：“按学年统计的人数”
},
颜色：['#272264'，'#6AF9C4']，
亚克斯：{
allowDecimals:false，
标题：{
文本：“计数”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.name.toLowerCase（）+'
'+this.point.y；
}
}
});
});
$（函数（）{
Highcharts.图表（“小时图表”{
数据：{
表：'按小时'，
switchRowsAndColumns：true
},
图表：{
类型：“列”
},
标题：{
文字：“身体按小时计数”
},
颜色：['#005481'，'#ED561B']，
亚克斯：{
allowDecimals:false，
标题：{
文本：“计数”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.name.toLowerCase（）+'
'+this.point.y；
}
}
});
});
我不知道您编写的所有代码，但我不知道如何将
$option
同时等于两个不同的值-
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>


$（函数（）{
Highcharts.图表（“年度图表”{
数据：{
表：'按年'，
switchRowsAndColumns：true
},
图表：{
类型：“列”
},
标题：{
正文：“按学年统计的人数”
},
颜色：['#272264'，'#6AF9C4']，
亚克斯：{
allowDecimals:false，
标题：{
文本：“计数”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.name.toLowerCase（）+'
'+this.point.y；
}
}
});
});
$（函数（）{
Highcharts.图表（“小时图表”{
数据：{
表：'按小时'，
switchRowsAndColumns：true
},
图表：{
类型：“列”
},
标题：{
文字：“身体按小时计数”
},
颜色：['#005481'，'#ED561B']，
亚克斯：{
allowDecimals:false，
标题：{
文本：“计数”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.name.toLowerCase（）+'
'+this.point.y；
}
}
});
});
除了@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>


$（函数（）{
Highcharts.图表（“小时图表”{
//数据：{
//表：'按小时'，
//switchRowsAndColumns：true
//},
图表：{
类型：“列”
},
标题：{
文字：“身体按小时计数”
},
颜色：['#005481'，'#ED561B']，
亚克斯：{
allowDecimals:false，
标题：{
文本：“计数”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.name.toLowerCase（）+'
'+this.point.y；
}
},
//虚拟数据
系列：[{
数据：[1,2,3,4,5]
}]
});
});
$（函数（）{
Highcharts.图表（“年度图表”{
//数据：{
//表：'按年'，
//switchRowsAndColumns：true
//  },
图表：{
类型：“列”
},
标题：{
正文：“按学年统计的人数”
},
颜色：['#272264'，'#6AF9C4']，
亚克斯：{
allowDecimals:false，