Highcharts沒有顯示

我有一個.tpl文件，我想添加幾個圖表到它。這些值將從MySQL數據庫中獲取。對於圖表，我使用Highcharts。Highcharts沒有顯示

這是我希望我的圖表看起來就像是着，當然值會改變小提琴。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

所以我的代碼是：

<head> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
</head> 
<body> 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
<script type="text/javascript"> 
    $(function() { 
      $('#container').highcharts({ 
       chart: { 
        type: 'column' 
       }, 
       title: { 
        text: 'Monthly Average Rainfall' 
       }, 
       subtitle: { 
        text: 'Source: WorldClimate.com' 
       }, 
       xAxis: { 
        categories: [ 
         'Jan', 
         'Feb', 
         'Mar', 
         'Apr', 
         'May' 
        ] 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Rainfall (mm)' 
        } 
       }, 
       tooltip: { 
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
        footerFormat: '</table>', 
        shared: true, 
        useHTML: true 
       }, 
       plotOptions: { 
        column: { 
         pointPadding: 0.2, 
         borderWidth: 0 
        } 
       }, 
       series: [{ 
        name: 'Tokyo', 
        data: [49.9, 71.5, 106.4, 129.2, 144.0] 


       }] 
      }); 
     }); 
<script> 

</script> 
</body>

當我把這個在我.tpl文件，它說明不了什麼。任何人都可以說我做錯了什麼。我要補充的jQuery或東西..

最新版本我有一個額外的事情提了，當我嘗試在一個單獨的jsfiddle利用這一點，它不工作有作爲。

來源

2014-11-25 Roland

你有接近尾聲流浪''

-1

請在給定的順序頭頭部添加這個腳本。

SRC = 「http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js」>

SRC =「http://code.highcharts.com /highcharts.js 「>

SRC =」 http://code.highcharts.com/modules/exporting.js「>

來源

2014-11-25 15:01:13 user230391

我的頭，在它的jsfiddle做工精細添加這些腳本。但不幸的是，它不在我的.tpl文件中工作。任何事情你都可以想到我可能會犯錯的地方。 – Roland 2014-11-25 15:50:24

能否請您提出任何其他的圖形表示法.. – Roland 2014-11-25 15:52:37

-1

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<script> 
$(function() { 

    var issueData = {"WAR":13,"VTO":14,"EXWH":33}; 
    var pieData = []; 
    for (i in issueData) { 
     pieData.push([i,issueData[i]]); 
    } 


    $('#container').highcharts({ 
     chart: { 
     type: 'pie', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Total tickets for each project' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     }, 

      series: [{ 
      data: pieData 
     }] 

    }); 
}); 
$(function() { 

    var issueData = {"bug":8,"false":5}; 
    var pieData = []; 
    for (i in issueData) { 
     pieData.push([i,issueData[i]]); 
    } 


    $('#container1').highcharts({ 
     chart: { 
     type: 'pie', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'WAR DOne status ' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     }, 

      series: [{ 
      data: pieData 
     }] 
    }); 
}); 
$(function() { 

    var issueData = {"true":3,"false":11}; 
    var pieData = []; 
    for (i in issueData) { 
     pieData.push([i,issueData[i]]); 
    } 


    $('#container2').highcharts({ 
     chart: { 
     type: 'pie', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'VTO DOne status ' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     }, 

      series: [{ 
      data: pieData 
     }] 
    }); 
}); 
$(function() { 

    var issueData = {"true":8,"false":6}; 
    var pieData = []; 
    for (i in issueData) { 
     pieData.push([i,issueData[i]]); 
    } 


    $('#container3').highcharts({ 
     chart: { 
     type: 'pie', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'EXWH DOne status ' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     }, 

      series: [{ 
      data: pieData 
     }] 
    }); 
}); 
</script> 

<title>Charts</title> 
</head> 
<body> 
<div id="container" style="height: 400px"></div> 
<div id="container1" style="height: 400px"></div> 
<div id="container2" style="height: 400px"></div> 
<div id="container3" style="height: 400px"></div> 
</body> 
</html>

來源

2014-11-26 05:33:43 user230391

這可能會幫助你...... – user230391 2014-11-26 05:35:31

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script> 
    $(function() { 
      $('#container').highcharts({ 
       chart: { 
        type: 'column' 
       }, 
       title: { 
        text: 'Monthly Average Rainfall' 
       }, 
       subtitle: { 
        text: 'Source: WorldClimate.com' 
       }, 
       xAxis: { 
        categories: [ 
         'Jan', 
         'Feb', 
         'Mar', 
         'Apr', 
         'May' 
        ] 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Rainfall (mm)' 
        } 
       }, 
       tooltip: { 
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
        footerFormat: '</table>', 
        shared: true, 
        useHTML: true 
       }, 
       plotOptions: { 
        column: { 
         pointPadding: 0.2, 
         borderWidth: 0 
        } 
       }, 
       series: [{ 
        name: 'Tokyo', 
        data: [49.9, 71.5, 106.4, 129.2, 144.0] 


       }] 
      }); 
     }); 
</script> 
</head> 
<body> 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</body>

來源

2014-11-26 05:47:09 user230391

這是你的代碼，現在它會工作，請檢查所有的變化 – user230391 2014-11-26 05:48:38

這是不是非常有幫助？爲了使這項工作改變了什麼？ – ivandov 2017-06-28 19:00:29

確保始終嘗試jQuery document ready function首先，當發生錯誤。

<head> 
<script src="/js/jquery-3.2.1.min.js"></script> 
</head> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    // code 
    }); 
</script>

來源

2017-09-20 15:57:58 Syno

相關問題