Highcharts圖不在JSP中渲染

我想通過調用一個函數來渲染圖。該圖表不是在我的jsp頁面中呈現的，但是當我在JSFiddle中測試完全相同的代碼時，它工作正常。Highcharts圖不在JSP中渲染

我有以下的庫也：

<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>

下面的腳本標籤包含創建圖表的功能：

<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>

我也有調用該函數作爲這樣一個單獨的div標籤：

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

還有一個圖表的div標籤：

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

下面是一個鏈接的jsfiddle這說明我的圖表繪製與我傳入值

的jsfiddle：http://jsfiddle.net/LLExL/6645/

我不知道我要去的地方錯了。對我來說似乎沒有什麼明顯的感謝您的時間。

編輯：值得一提的是，我的腳本標籤是在頭標籤內。

編輯：我更新了我的JSFiddle顯示x和y值。我的問題是沒有什麼呈現在我的JSP，我不知道爲什麼。

編輯：這現在已經修復。庫依賴於一個jQuery庫highcharts所以我增加了highcharts庫上方的以下內容：

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

原來的jsfiddle不需要你引用一個jQuery庫，所以它工作得很好那裏。以錯誤的方式

來源

2016-10-28 user1156596

它在JSFiddle中工作，而不是在我的JSP中，因爲我的JSP缺少jQuery庫，而高級庫依賴於它。事實證明，JSFiddle不需要你引用jquery庫作爲依賴。

來源

2016-10-28 13:21:23 user1156596

你已經寫了一系列

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' 
       } 
      } 
     }]

上面的代碼可以幫助你

來源

2016-10-28 09:53:17

改變一系列參數，並把在陣列嘗試這種方式

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」，「column」）;

來源

2016-10-28 10:03:57

感謝您的回覆。這並沒有改變任何事情。它仍然不會出於某種未知的原因。 – user1156596

它呈現。看到jsfiddle http://jsfiddle.net/LLExL/6640/ – morganfree

請閱讀我原來的問題。我的問題是，我的JSP頁面上沒有渲染，但在JSFiddle上渲染了一些東西。 – user1156596

Highcharts圖不在JSP中渲染

回答

相關問題