chart.jsで綺麗なチャート作ってみる

chart.jsで綺麗なチャート作ってみる:

Qiitaですごいですね！

いつも見てるばっかりだったので、書いてみようと思います。

あくまで自分の知識のストックとして。

さて、初回はchart.jsというチャート専用のjavascriptライブラリがあると聞いたので、早速いくつかチャートを作ってみようと思います。

今回は、とある企業の決算書の中からいくつか指標を抜き出してきました。

参考記事

・http://gionkunz.github.io/chartist-js/getting-started.html

javascriptで綺麗なチャートを作る方法

まずは、htmlで綺麗なチャートを作ってみる

Macでやります

完成系

_Users_kei_Desktop_pgm_LG_php_wordpress_web%E3%82%B5%E3%82%A4%E3%83%88_LiLa-site_x-domain_html%E3%82%B5%E3%83%BC%E3%83%8F%E3%82%99%E3%83%BC_chart_chart.html.png

必要なファイルをダウンロード

cd

cd desktop

sudo npm install -g bower

bower install chartist --save

これでdesktopにチャート作成に必要なcssとjsがダウンロードされました。

htmlの記述

chart.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>My first Chartist Tests</title> 
    <link rel="stylesheet" 
    href="bower_components/chartist/dist/chartist.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="chart.css"> 
    <link rel="stylesheet" type="text/css" href="../reset.css"> 
    <link rel="stylesheet" type="text/css" href="../default.css"> 
    <link rel="stylesheet" type="text/css" href="../desktop.css"> 
</head> 
 
<body> 
 
    <script src="bower_components/chartist/dist/chartist.min.js"></script> 
 
    <div class="disgri11 wrp chnage-disgri11"> 
        <div class="item"> 
            <h4>グループ連結営業利益率</h4> 
            <p>単位：%</p> 
            <div class="ct-chart ct-golden-section" id="chart1"></div> 
        </div> 
 
        <div class="item"> 
            <h4>グループ連結売上高</h4> 
            <p>単位：百万</p> 
            <div class="ct-chart ct-golden-section" id="chart2"></div> 
        </div> 
 
        <div class="item"> 
            <h4>グループコスト内訳</h4> 
            <p>単位：百万</p> 
            <div class="ct-chart ct-golden-section" id="chart3"></div> 
        </div> 
    </div> 
 
    <script> 
  // Initialize a Line chart in the container with the ID chart1 
  new Chartist.Line('#chart1', { 
    labels: ["2018-Q1", "2018-Q2", "2018-Q3", "2018-Q4"], 
    series: [[6.7, 6.8, 4.9, 5.3]] 
  }); 
 
  // Initialize a Line chart in the container with the ID chart2 
  new Chartist.Bar('#chart2', { 
    labels: [1, 2, 3, 4], 
    series: [[6159, 5751, 7653, 6807]] 
  }); 
 
  new Chartist.Pie('#chart3', { 
    series: [57.7, 13.6, 16.7, 1.6, 1.3, 5.9, 3.1] 
  }, { 
    donut: true, 
    donutWidth: 60, 
    donutSolid: true, 
    startAngle: 270, 
    showLabel: true 
  }); 
</script> 
</body> 
</html>

これで、htmlの入っているフォルダ内にdesktopにインストールされたbower_componentsを入れるだけでグラフを作ることができます。

もちろん、jsの中身を参考サイトを参照しながら書き換えるだけで綺麗なグラフを作ることができます！

画像でよくね？

よくないです。

データが頻繁に変化したり、グラフ数が増えてくると、自動で数値だけ入力するとチャートを作ってくれるプログラムを作った方がいいですよね！

しかも、画像だとボヤけちゃうところ、これ使えば、そんな心配ないですしね！

自動化が好きな人にはオススメです！

何より手っ取り早い！

もっと細かいセッティングができるんですかね。。。

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫