Onclick用新數據刷新條形圖javascript（morris chart）

Question

我已經設置了條形圖。數據默認/當頁面加載我通過PHP獲得。這部分是確定和工作（我已經按照一些例子，這是在網絡上。）

function init_morris_charts() { 

     if(typeof (Morris) === 'undefined'){ return; } 
     console.log('init_morris_charts'); 

     if ($('#graph_bar').length){ 
      morbar = Morris.Bar({ 
       element: 'graph_bar', 
       data: [ 
       <?php echo $tocke; ?> 
       ], 
       xkey: 'date', 
       ykeys: ['marketcap'], 
       labels: ['Market cap value USD'], 
       barRatio: 0.4, 
       barColors: ['#aa8400'], 
       xLabelAngle: 0, 
       hideHover: 'auto', 
       resize: true 
      }); 
     } 
    } 

現在我想建立的是某一條鏈路上每次用戶點擊，新的API調用時功能並用響應數據創建新圖表。基本上圖表需要刷新並顯示新數據。

$('.show_movement_icon').click(function() { 
     valuta_short = $(this).attr('id'); 
     $('#barchart_valuta').text(valuta_short); 

     // example: http://www.coincap.io/history/365day/BTC 
     url = 'http://www.coincap.io/history/365day/'+valuta_short; 
     var novetocke = ""; 
     var novetocke_edit = ""; 

     $.getJSON(url, function(data) { 

      //To get only market cap values. 
      var market_cap = data.market_cap; 

      for(var i=0; i < market_cap.length; i++) 
      { 
       //example: 06-06-2017 07:04:13 
       datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s'); 

       novetocke += "{ date: '" + datum + "', marketcap: " + market_cap[i][1] + " }, "; 
      } 

      novetocke_edit = novetocke.substring(0, novetocke.length-2); 

     }); 
     morbar.setData(novetocke_edit); 
    }); 

當我按下某個鏈接時調用函數。 API si的URL正確放置在一起。我還創建格式字符串，我認爲「數據」，在圖表需要它..

像這樣：

{ date: '12-08-2016 03:08:56', marketcap: 0 }, { date: '13-08-2016 03:08:20', marketcap: 1029733 }, { date: '14-08-2016 05:08:30', marketcap: 1584452 }, { date: '15-08-2016 05:08:30', marketcap: 2460141 }, { date: '16-08-2016 05:08:31', marketcap: 2393176 }, { date: '17-08-2016 05:08:31', marketcap: 2752283 }, { date: '18-08-2016 05:08:31', marketcap: 2676743 }, { date: '19-08-2016 05:08:31', marketcap: 2268252 }, { date: '20-08-2016 05:08:31', marketcap: 2040360 }, { date: '21-08-2016 05:08:30', marketcap: 1999935 }, { date: '22-08-2016 05:08:31', marketcap: 2082395 }, .. etc 

可是，我不工作。在控制檯我看到這一點：

類型錯誤：d未定義 morris.min.js

有人可以告訴我，我的代碼是不正確的。 TNX！

Answer 1

這是我的版本..

$('.show_movement_icon').click(function() { 
    valuta_short = $(this).attr('id'); 
    $('#barchart_valuta').text(valuta_short); 

    // URL setup 
    url = 'http://www.coincap.io/history/365day/'+valuta_short; 

    var arr = []; 

    $.getJSON(url, function(data) { 
     //To get only market cap values. 
     var market_cap = data.market_cap; 

     for (var i = 0; i < market_cap.length; i++) { 
      datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s'); 

      // Fill array with data 
      arr.push({ 
       date: datum, 
       marketcap: market_cap[i][1] 
      }); 
     } 

     // Send array to chart for data update 
     morbar.setData(arr); 
    }); 

}); 

Answer 2

您需要在getJSON函數內調用setData方法。 你的代碼將被重寫，以便：

$('.show_movement_icon').click(function() { 
    // ... copy lines from your code ... 
    $.getJSON(url, function(data) { 
    //To get only market cap values. 
    var market_cap = data.market_cap; 

    for(var i=0; i < market_cap.length; i++) 
    { 
     //example: 06-06-2017 07:04:13 
     datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s'); 

     novetocke += "{ date: '" + datum + "', marketcap: " + market_cap[i][1] + " }, "; 
    } 

    // I changed the following 3 lines 
    novetocke_edit = novetocke.substring(0, novetocke.length-2); 
    var chartData = JSON.parse(novetocke_edit); 
    morbar.setData(chartData); 
    }); 
}); 

我也被JS數組（JSON.parse(novetocke_edit)），因爲我覺得使用setData不能使用字符串，需要一個對象換成你的字符串變量。