js 圖表插件 chartjs 2.4

PS:該圖表插件對手機端支持挺好

網上的文章大多數的參數都是老版本的過時的，最新api查看官網 http://www.chartjs.org/docs/ 

下載地址  https://github.com/chartjs/Chart.js/releases/tag/v2.4.0

點擊 tags可以下載其它版本

使用方法

第一步下載   copy dist文件夾下面的資源文件到項目   接着引入 

   
   
   
           

    
    
    
            
<script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/Chart.bundle.js" type="text/javascript"></script>
    
    
    
            
 <script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/utils.js" type="text/javascript"></script>
   
   
   
           

第二步 然后dom創建一個畫布元素設置高寬

   
   
   
           

    
    
    
            
<div class="chartsdiv" id="chartsdiv">
    
    
    
            
 <canvas id="canvas" style="height:300px;" height='300'></canvas>
    
    
    
            
 </div>
   
   
   
           

第三步  js設置config 全局引用  option和data，然后初始化 config，方便以后數據data更新能通知報表更新數據，因為初始化存的是config引用，config每次更新的時候報表都會去取config，如果單獨初始化報表的時候直接給一個data數據，當data數據更改的時候，data的引用的指針改變，自然和報表初始化的時候的data指針不同，所以沒法更新

全局初始化config配置

   
   
   
           

    
    
    
            
 var config = {
    
    
    
            
 type:'line',
    
    
    
            
 options:{
    
    
    
            
 title:{display:true,text:'成交數據 單位(元)'},
    
    
    
            
 tooltips:{mode: 'index',intersect:false},
    
    
    
            
 type: 'line',
    
    
    
            
 scales: {
    
    
    
            
 xAxes: [{
    
    
    
            
 display: true,
    
    
    
            
 scaleLabel: {
    
    
    
            
 display: true,
    
    
    
            
 labelString: '月'
    
    
    
            
 }
    
    
    
            
 }],
    
    
    
            
 yAxes:[{
    
    
    
            
 display: true,
    
    
    
            
 scaleLabel: {
    
    
    
            
 display: true,
    
    
    
            
 labelString: '單位(元)'
    
    
    
            
 }
    
    
    
            
 }]
    
    
    
            

    
    
    
            
 }
    
    
    
            
 },
    
    
    
            
 data:{
    
    
    
            

    
    
    
            
 }
    
    
    
            
 }
   
   
   
           

初始化chartjs data是沒有數據的 做全局數據

   
   
   
           

    
    
    
            
var ctx = document.getElementById("canvas").getContext("2d");
    
    
    
            
 $(function() {
    
    
    
            
 window.myLineChart = Chart.Line(ctx, config);
    
    
    
            
    })
   
   
   
           

初始化數據傳入 更新報表

   
   
   
           

    
    
    
            
 function refeshCharts(areaFangjiaList){
    
    
    
            

    
    
    
            

    
    
    
            
 var xcategory = [];
    
    
    
            
 var ysaveprice = [];
    
    
    
            
 var esavgprice = [];
    
    
    
            

    
    
    
            

    
    
    
            
 $(areaFangjiaList).each(function(){
    
    
    
            
 xcategory.push(this.FDATE)
    
    
    
            
 ysaveprice.push(this.FisrtHandAvgPrice)
    
    
    
            
 esavgprice.push(this.SeondHandAvgPrice)
    
    
    
            
 })
    
    
    
            
 config.data={
    
    
    
            
 labels: xcategory,
    
    
    
            
 datasets: [{
    
    
    
            
 label: "一手均價",
    
    
    
            
 borderColor: window.chartColors.red,
    
    
    
            
 data: ysaveprice
    
    
    
            
 }, {
    
    
    
            
 label: "二手均價",
    
    
    
            
 borderColor: window.chartColors.blue,
    
    
    
            
 data: esavgprice
    
    
    
            
 }]
    
    
    
            
 }
    
    
    
            

    
    
    
            

    
    
    
            
 window.myLineChart.update();
    
    
    
            

    
    
    
            

    
    
    
            
 }