Question

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

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

例如，当我将日期范围图表放在脚本中时，当用户选择日期范围选项时，这些图表将在页面上生成。但如果他们选择逐年选项，那么该图表就不会显示出来。如果我在脚本中切换图表函数的顺序，那么当用户选择日期范围函数时，他们会获得所有html表但没有图表，而如果他们选择逐年选项，则图表显示正常。

我的代码中存在一些冲突，但我无法弄清楚我哪里出错了。有人可以帮忙吗？

<?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元素。示例max-age=60文件：

index.php

带有由php生成的html表填充数据的Highcharts - 只会加载一个

2 个答案: