Highcharts控制元件使用說明及注意事項, 錯誤: 'Highcharts' 未定義 錯誤: 'jb' 為空或不是物件
阿新 • • 發佈:2019-02-20
最近做專案需要用到報表,網上查詢了一下,發現highcharts這個挺不錯,並且是前臺的。自己手動練習了幾個小例子,出現的問題已有不同顏色標出。
第一部:引用類庫
<script src="script/jquery.min.js" type="text/javascript"></script>//第一引用
<script src="script/highcharts/highcharts.js" type="text/javascript"></script> //第二引用
這裡需要注意引用的先後順序,位置不能顛倒,否則出現,錯誤: 'Highcharts' 未定義
<script type="text/javascript" src="../js/modules/exporting.js"></script>//這個如果不需要列印功能,可以不引用
第二部:加入報表js檔案,這是一個餅圖例子,可直接拷貝
<script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); </script>
第三部:在from表單中加入
<div id="container" style="min-width: 800px; height: 500px; margin: 0 2em">
上段程式碼主要是把報表顯示在id="container"的容器中,如果忘記加入則出現,錯誤: 'jb' 為空或不是物件。
希望對需要的人有所幫助,謝謝光臨!