簡體   English   中英

高圖不顯示柱形圖

[英]Highcharts not displaying column chart

在過去的幾個小時中,我一直在嘗試加載Highcharts。

一切似乎都是正確的。 我在Highcharts參考之前有Jquery。

我在Chrome中的控制台上沒有任何錯誤。

我希望它看起來像這樣(工作的JQuery) 工作的Jquery

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="/static/highcharts/js/highcharts.js"></script>
    <script src="/static/highcharts/js/modules/exporting.js"></script>

    <title>Tool Tracker</title>        

<body>
    <div>

<div id="chart_id" class="chart" style="height:100px; width:100%"></div>

    </div>


<!-- Maps the Python template context variables from views.py to the Highchart js variables -->
<script>
var chart_id = chart_id
var chart = {'renderTo': 'chart_id', 'height': 500}
var title = {'text': '123456 Tool life by Location'}
var xAxis = {'categories': ['T01', 'T02']}
var series = [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
</script>

<!-- Highchart js. Variable map shown above -->
<script>
$(document).ready(function() {
    $(chart_id).highcharts({
        chart: chart,
        title: title,
        xAxis: xAxis,
        series: series
    });
});
 </script>

</body>

下面是一個JSfiddle- 不起作用

謝謝您的幫助!

您不工作的小提琴有兩個問題:

首先,在html部分和JSfiddle的External resource工具中,所有腳本都包含兩次。 您需要刪除外部資源或刪除<script>標記。

其次,在您的javascript的第一行中var chart_id = 'chart_id您錯過了結束時間'; 和chart_id前面的# ,讓JQuery知道它是您要引用的ID。

var chart_id = '#chart_id'; 是你想要的。

工作JSfiddle

原始示例的HTML代碼:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

包含您數據的Javascript代碼:

$(function () {
    $('#container').highcharts({
        title: {
            text: '123456 Tool life by Location'
        },
        xAxis: {
            categories: ['T01', 'T02']
        },
        labels: {
            items: [{
                html: 'Some text',
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
    });
});

結果: http : //jsfiddle.net/logual/9gpw688e/1/

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM