Onclick 使用新数据刷新条形图 javascript(莫里斯图表) [英] Onclick refresh bar chart with new data javascript (morris chart)

问题描述

我已经设置了条形图.默认/页面加载时的数据我通过 php 获得.这部分没问题并且可以工作(我已经按照网上的一些示例进行了操作.)

I've set up bar chart. Data for default/when page loads I get via php. This part it is ok and works (I've followed some example that was on the web.)

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 调用，并使用响应数据设置新图表.基本上图表需要刷新并显示新数据.

Now I would like to set up functionality that every time user click on certain link, new api call is made and with response data I set up new chart. Basically chart needs to refresh and show new data.

$('.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 正确组合在一起.我还以我认为图表中的数据"需要它的格式创建字符串..

Function is called when I press certain link. URL for API si put together correctly. I also create string in format that I think "data" in chart needs it..

像这样:

{ 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

但是有些东西不起作用.在控制台我看到这个:

But something doesn't work. In console I see this:

类型错误:d 未定义morris.min.js

谁能告诉我，我的代码哪里不正确.Tnx！

Can somebody tell me, where my code isn't correct. Tnx!

推荐答案

This my version..

This my version..

$('.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(莫里斯图表)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！