chart.jsで非同期でデータを取得し表示する際に参考になったもの

2018.09.04 Tuesday 00:05
0
    chart.jsで非同期でデータを取得し表示する際に参考になったもの

    $.getJSON("json取得するurl", function(data) {

    // 件数が複数ある場合はここでループまわしてラベルとデータを取得
    var labels = data.customers[0].amounts.map(function(e) {
    return e[0];
    });
    var data = data.customers[0].amounts.map(function(e) {
    return e[1];
    });

    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: labels,
    datasets: [{
    backgroundColor: 'rgb(129, 198, 2228)',
    borderColor: 'rgb(0, 150, 215)',
    data: data
    }]
    },
    options: {
    responsive: 'true',
    }
    });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <canvas id="myChart"></canvas>

    category:javascript | by:ittoocomments(0)trackbacks(0) | -

    スポンサーサイト

    2018.11.13 Tuesday 00:05
    0
      category:- | by:スポンサードリンク | - | - | -
      Comment








         
      Trackback
      この記事のトラックバックURL

      ad
      Calender
          123
      45678910
      11121314151617
      18192021222324
      252627282930 
      << November 2018 >>
      Selected entry
      PR
      Category
      Archives
      Recent comment
      • 円マークが自動変換されてる
        aaaaaa
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        66hills
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        ssd
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        max
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • コンピュータ業界の根本的な変化
        cloud
      • コンピュータ業界の根本的な変化
        Dellの仮想化
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        えちごや
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        touch
      Recent trackback
      • スマートフォンの法人活用例
        無線LANネットのブログ
      • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
        特選情報
      Recommend
      Link
      Profile
      Search
      Others
      Mobile
      qrcode
      Powered
      無料ブログ作成サービス JUGEM