dpfqy5976 2017-09-21 05: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 01: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 Linux环境下openssl报错
  • ¥15 我在使用VS编译并执行之后,但是exe程序会报“无法定位程序输入点_kmpc_end_masked于动态链接库exe上“,请问这个问题有什么解决办法吗
  • ¥15 el-select光标位置问题
  • ¥15 单片机 TC277 PWM
  • ¥15 在更新角色衣服索引后,Sprite 并未正确显示更新的效果该如何去解决orz(标签-c#)
  • ¥15 VAE代码如何画混淆矩阵
  • ¥15 求遗传算法GAMS代码
  • ¥15 雄安新区高光谱数据集的下载网址打不开
  • ¥66 android运行时native和graphics内存详细信息获取
  • ¥15 rk3566 Android11 USB摄像头 微信
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部