Highcharts Grafik nicht in JSP

Question

Rendern Ich versuche, ein Diagramm durch den Aufruf einer Funktion zu rendern. Das Diagramm wird nicht in meiner JSP-Seite gerendert, aber wenn ich genau den gleichen Code in JSFiddle teste, funktioniert es.

Ich habe folgende Bibliotheken auch:

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

Das folgende Skript-Tag enthält die Funktion, die das Diagramm erstellt:

<script> 
    function drawChart(xAxis, yAxis, title, type) { 
    $('#container').highcharts({ 
     chart: { 
      type: type 
     }, 
     title: { 
      text: title 
     }, 
     xAxis: { 
      title: { 
       text: xAxis 
      }, 

      type: 'category', 
     }, 
     yAxis:{ 
      title: { 
       text: yAxis, 
      }, 
     }, 

     series: [{ 
      data: [{ 
      x: 100, 
      y: 50 
     }], 
     }] 
    }) 
} 
</script> 

ich auch einen separaten div-Tag haben, die diese Funktion als solche Anrufe :

<script>drawChart("test1", "test2", "test3", "column");</script> 

Und ein div-Tag für das Diagramm:

<div id="container" style="width:80%; height:400px; width: 300px;"> </div> 

Nachfolgend finden Sie eine JSFiddle Link, der mein Diagramm mit den Werten Rendering zeigt, dass ich in geben

JSFiddle. http://jsfiddle.net/LLExL/6645/

Ich bin nicht sicher, wo ich falsch werde. Nichts scheint mir offensichtlich. Vielen Dank für Ihre Zeit.

EDIT: Es ist erwähnenswert, dass meine Skript-Tags innerhalb der Kopf-Tag sind.

BEARBEITEN: Ich habe meine JSFiddle aktualisiert, um x und y Werte anzuzeigen. Mein Problem ist nichts rendert auf meiner JSP und ich weiß nicht warum.

EDIT: Dies wurde jetzt behoben. Die highcharts Bibliothek auf einer jQuery-Bibliothek hängt so habe ich folgende über der highcharts Bibliothek:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

Es stellt sich heraus JSFiddle nicht benötigen Sie eine jQuery-Bibliothek zu verweisen, so es gut dort gearbeitet.

Answer 1

Es funktionierte in JSFiddle und nicht in meiner JSP, da meine JSP die jquery-Bibliothek vermisste, von der die Highcharts-Bibliothek abhängt. Es stellt sich heraus, dass JSFiddle nicht benötigt, um die jquery-Bibliothek als Abhängigkeit zu referenzieren.

Answer 2

Sie haben geschrieben Serie in falscher Weise

series: [{ 
      name: 'Population', 
      data: [ 
       ['Shanghai', 23.7], 
       ['Lagos', 16.1], 
       ['Istanbul', 14.2], 
       ['Karachi', 14.0], 
       ['Mumbai', 12.5], 
       ['Moscow', 12.1], 
       ['São Paulo', 11.8], 
       ['Beijing', 11.7], 
       ['Guangzhou', 11.1], 
       ['Delhi', 11.1], 
       ['Shenzhen', 10.5], 
       ['Seoul', 10.4], 
       ['Jakarta', 10.0], 
       ['Kinshasa', 9.3], 
       ['Tianjin', 9.3], 
       ['Tokyo', 9.0], 
       ['Cairo', 8.9], 
       ['Dhaka', 8.9], 
       ['Mexico City', 8.9], 
       ['Lima', 8.9] 
      ], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       format: '{point.y:.1f}', // one decimal 
       y: 10, // 10 pixels down from the top 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }] 

Above Code Sie können

Answer 3

Änderung Serie Parameter und in Array setzen helfen auf diese Weise versuchen

function drawChart(xAxis, yAxis, title, type) { 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: title 
    }, 
    xAxis: { 
     title: { 
      text: xAxis 
     }, 

     type: 'category', 
    }, 
    yAxis:{ 
     title: { 
      text: yAxis, 
     }, 
    }, 

    series: [{ 
     data:[ 
    ['x', 100], 
     ['y', 50] 
    ] 
    }], 

}) 

}

drawChart ("test1", "test2", "test3", "Spalte");