首页>>Jquery文字>>js 生成简单的柱状图(2014-04-28)

js 生成简单的柱状图

 本例与jquery无关，算是简单的柱状图，不需要很复杂，数据获取也很方便

js 生成简单的柱状图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="chartContainer" style="height: 300px; width: 100%;"> </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   window.onload = function () {  
  3.     var chart = new CanvasJS.Chart("chartContainer",  
  4.     {  
  5.       title:{  
  6.         text: "各国人口",      
  7.       },  
  8.       axisY: {  
  9.         title: "人口"  
  10.       },  
  11.       legend: {  
  12.         verticalAlign: "bottom",  
  13.         horizontalAlign: "center"  
  14.       },  
  15.       theme: "theme2",  
  16.       data: [  
  17.   
  18.       {          
  19.         type: "column",    
  20.         showInLegend: true,   
  21.         legendMarkerColor: "grey",  
  22.         legendText: "国家(单位亿)",  
  23.         dataPoints: [        
  24.         {y: 2.90342554,  label: "美国" },  
  25.         {y: 10.49700118,  label: "印度"},          
  26.         {y: 13.17442552,  label: "中国"},          
  27.         ]  
  28.       },     
  29.       ]  
  30.     });  
  31.   
  32.     chart.render();  
  33.   }  
  34.   </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_324.html