Highcharts zeigt kein Säulendiagramm an

Ich habe in den letzten paar Stunden versucht, meine Highcharts zu laden.Highcharts zeigt kein Säulendiagramm an

Alles scheint korrekt zu sein. Ich habe Jquery vor der Highcharts-Referenz.

Ich habe keine Fehler auf meiner Konsole in Chrome.

Ich möchte es so (Arbeits JQuery) suchen 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>

Nachfolgend finden Sie eine JSfiddle - Not working

DANKE für eure Hilfe!

Quelle

2016-04-16 TangoAlee

Use '#' für jQuery-Selektor. Also ändere var chart_id = chart_id in var chart_id = '#chart_id' –

Sie nicht arbeiten Geige 2 Probleme:

Zuerst sind alle Skripte 2 mal enthalten, sowohl im HTML-Teil als auch im External resource Werkzeug von JSfiddle. Sie müssen entweder die externen Ressourcen entfernen oder die <script>-Tags entfernen.

Zweitens in der ersten Zeile Ihres Javascript var chart_id = 'chart_id Sie das Schließen verpasst '; und der # vor dem chart_id zu lassen JQuery weiß, es ist eine ID, die Sie sich beziehen.

var chart_id = '#chart_id'; Ist was du willst.

Working JSfiddle

Quelle

2016-04-16 07:48:36

etwas so einfaches hat mich im Grunde die ganze Nacht gehalten! DANKE! – TangoAlee

HTML-Code von der ursprünglichen Probe:

<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-Code mit Ihren Daten:

$(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'}] 
    }); 
});

Ergebnis: http://jsfiddle.net/logual/9gpw688e/1/

Quelle

2016-04-16 07:36:38

Highcharts zeigt kein Säulendiagramm an

Antwort

Verwandte Themen