Highcharts не отображает диаграмму столбца

Я пытаюсь в течение последних нескольких часов загружать свои Highcharts.Highcharts не отображает диаграмму столбца

Все кажется правильным. У меня есть JQuery перед ссылкой Highcharts.

У меня нет ошибок на консоли в Chrome.

Я хотел бы, чтобы выглядеть следующим образом (работает JQuery) Working 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 проблемы:

Во-первых, все скрипты включены 2 раза, как в html-части, так и в инструмент External resource JSfiddle. Вам нужно либо удалить внешние ресурсы, либо удалить теги <script>.

Во-вторых, в первой строке JavaScript var chart_id = 'chart_id вы пропустили закрытие '; и # перед chart_id, чтобы позволить JQuery знать это идентификатор вы имеете в виду.

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

Highcharts не отображает диаграмму столбца

ответ

Смежные вопросы