单击刷新带有新数据的条形图 javascript（莫里斯图）

Question

我已经设置了条形图。我通过 php 获得的 default/when 页面加载数据。这部分没问题并且有效（我遵循了网络上的一些示例。）

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
            });
        }
    }

现在我想设置这样的功能，即每次用户单击某个 link 时，都会进行新的 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);
    });

当我按下某个 link 时调用函数。 URL for API si 放在一起正确。我还创建了我认为图表中 "data" 需要的格式的字符串..

像这样：

{ 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

但是有些东西不起作用。在控制台中我看到了这个：

TypeError: d 未定义 morris.min.js

有人可以告诉我我的代码哪里不正确吗？谢谢！

Answer 1

您需要在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 不能使用字符串并且需要一个对象。

Answer 2

这是我的版本..

$('.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);
    });

});

单击刷新带有新数据的条形图 javascript（莫里斯图）

Onclick refresh bar chart with new data javascript (morris chart)

javascript

api

charts

morris.js