Question

我目前正面临一个问题。我有一个HTML页面，其中包含多个div来加载高级图表。同一页面包含所有jquery脚本。

我正在使用angularJS来路由页面。索引页面，Chart1Page和Chart2Page。当我第一次加载chart1page所有图表加载但如果我从chart2page返回到chart1page，一些图表不加载。下面的代码是没有加载的图表之一。如果我替换像饼图等其他图表，结果是一样的。我需要检查序列吗？

<script>
function freecapacity() {
            $(function () {
                // Set up the chart
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'freecapacity',
                        type: 'column',
                        margin: 75

                    },
                    title: {
                        text: 'Free Capacity'
                    },
                    subtitle: {
                        text: ''
                    },
                    plotOptions: {
                        column: {
                            depth: 25
                        }
                    },
                    xAxis: {
                        categories: ['A', 'B', 'C', 'S', 'D', 'DD', 'PD']
                    },
                    series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
                    }]
                });
            });
        }

        freecapacity();
</script>
<html>
<div class="row">

    <h5 class="form-control" style="background-color:#D2D7D3"><label>Hub and GSA Information</label></h5>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
        <div class="form-control" style="height: 350px;" id="freecapacity"></div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
        <div class="form-control" style="height: 350px;" id="gsanomination"></div>
    </div>
</div>
</html

Answer 1

我建议您对Highcharts使用Angularjs指令：https://github.com/pablojim/highcharts-ng

比在视图控制器中设置Highchart对象，而不是在html文件中使用脚本标记。

导航后的Highchart.js和AngularJS某些图表无法加载

1 个答案: