dpfqy5976 2017-09-21 13:46 采纳率: 100%
浏览 77
已采纳

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

I have a program that I've built using php/mysql where the user can choose different options at the beginning, such as to compare data from a specific date range or to compare year by year data by selecting which years to compare. Once the user chooses an option and either inputs the date range or selects what years to compare, I use php to pull the data from a mysql database and display it in html tables. All of the html is generated with php.

I have Highcharts set up to use the data from the html tables to generate a chart by including a set of functions beneath the php block. The problem is, the chart function I put first will generate while the ones below wont.

For example, when I put the date range charts first in the script, those charts will generate on the page when a user selects the date range option. But if they select the year-by-year option, that chart won't show up. If I switch the order of the chart functions in the script then when a user selects the date range functions they get all the html tables but no chart, while if they select the year-by-year option the chart shows up fine.

Something is conflicting in my code but I can't figure out where I'm going wrong. Can anyone help?

<?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>
  • 写回答

2条回答 默认 最新

  • doob0526 2017-09-22 09:38
    关注

    I don't know all you code but I don't see how $option could be equal to 2 different values - opt1 and opt2 - in the same time so you can change your javascript code to not generate an error like this :

    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误