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

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

TypeError：d未定义 morris.min.js

有人可以告诉我，我的代码不正确。 TNX！

Answer 1

您需要在getJSON函数中调用setData方法。您的代码将被重写：

JSON.parse(novetocke_edit)

我还用JS数组（console.log(inputtxt.value)）替换了你的字符串变量，因为我觉得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);
    });

});

带有新数据的onclick刷新条形图javascript（morris chart）

2 个答案: