Question

我尝试在高图上绘图，代码在jsfiddle上运行正常，但在本地测试时失败。

我在我的代码中使用了flask，jinja2和twitter-bootstrap。 highcharts的数据由jinja2以json转储（标记为安全）提供。

我无法弄清楚我的图表没有出现在我的浏览器上。我正在测试firefox上的代码，所以这不是IE问题。

我也是在highcharts.js之前获取jquery所以导入顺序没问题。

代码： `

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

        <script src="/static/bootstrap3/js/jquery-1.js"></script>
        <script src="/static/bootstrap3/js/bootstrap.js"></script>
        <script src="/static/bootstrap3/js/docs.js"></script>

        <script src="/static/js/Chart.js"></script>

        <link rel="shortcut icon" href="/static/"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">






        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css"/>
        <!-- custom styles -->
        <link rel="stylesheet" href="/static/css/dashboard.css"/>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

      <style type="text/css" id="holderjs-style"></style>
        <title>
        Weekly Reports
        </title>
    </head>

<div id="percentiles" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
    $(function () {
        $('#percentiles').highcharts({
            title:{
                text: 'Gas Usage Weekly Percentiles',
                x: -20 //center
            },
            xAxis:{
                categories : ["week 4", "week 5", "week 6", "week 7"]
            },
            yAxis: {
                title: {
                    text: 'Percentiles'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                        name: '25th',
                        data: [0.69499999999999995, 0.01, 1.5350000000000001, 2.0175000000000001]
                    },{
                        name: '50th',
                        data: [3.2349999999999999, 1.6349999999999998, 3.25, 3.2599999999999998]
                    },{
                        name: '75th',
                         data: [4.4925000000000006, 4.4625000000000004, 4.9300000000000006, 4.2575000000000003]
                    }]
        });
    });
</script>

</html>`

highcharts图表适用于jsfiddle，但在本地失败

0 个答案: