ハイチャートでは縦棒グラフが表示されない

私はハイチャートをロードするために過去数時間の努力を続けてきました。ハイチャートでは縦棒グラフが表示されない

すべてが正しいようです。私はハイチャートのリファレンスの前にJqueryを持っています。

Chromeのコンソールにエラーはありません。以下は

私はそれが（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される - Not working

はあなたの助けをありがとう！元のサンプルから

出典

2016-04-16 TangoAlee

jQueryセレクタに「＃」を使用します。だからvar chart_id = chart_idをvar chart_id = '#chart_id'に変更してください –

あなたは働いていないフィドルは、2つの問題があります。

まず、すべてのスクリプトは、HTML部分とJSfiddleのExternal resourceツールの両方に2回含まれています。外部リソースを削除するか、<script>タグを削除する必要があります。あなたはjQueryのは、それはあなたが参照のうえいるIDです知っているようにchart_id前に決算';と#を逃したvar chart_id = 'chart_idあなたのjavascriptの最初の行に

第二に、。

var chart_id = '#chart_id';あなたは何ですか？

Working JSfiddle

出典

2016-04-16 07:48:36

何かがシンプルなので基本的に徹夜しています！ありがとうございました！ – TangoAlee

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/

出典

2016-04-16 07:36:38

ハイチャートでは縦棒グラフが表示されない

答えて

関連する問題