いろんなチャート作ってみる
いろんなチャート作ってみる:
Qiitaですごいですね！
いつも見てるばっかりだったので、書いてみようと思います。
あくまで自分の知識のストックとして。
参考記事
・http://gionkunz.github.io/chartist-js/getting-started.html
javascriptで綺麗なチャートを作る方法
まずは、htmlで綺麗なチャートを作ってみる
Macでやります
これでdesktopにチャート作成に必要なcssとjsがダウンロードされました。
これで、htmlの入っているフォルダ内にdesktopにインストールされたbower_componentsを入れるだけでグラフを作ることができます。
もちろん、jsの中身を参考サイトを参照しながら書き換えるだけで綺麗なグラフを作ることができます！
Qiitaですごいですね！
いつも見てるばっかりだったので、書いてみようと思います。
あくまで自分の知識のストックとして。
参考記事
・http://gionkunz.github.io/chartist-js/getting-started.html
javascriptで綺麗なチャートを作る方法
まずは、htmlで綺麗なチャートを作ってみる
Macでやります
必要なファイルをダウンロード
cd
cd desktop
sudo npm install -g bower
bower install chartist --save
htmlの記述
<!DOCTYPE html>
<html>
<head>
<title>My first Chartist Tests</title>
<link rel="stylesheet"
href="bower_components/chartist/dist/chartist.min.css">
</head>
<body>
<!-- Site content goes here !-->
<script src="bower_components/chartist/dist/chartist.min.js"></script>
<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>
<script>
// Initialize a Line chart in the container with the ID chart1
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
});
// Initialize a Line chart in the container with the ID chart2
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[5, 2, 8, 3]]
});
</script>
</script>
</body>
</html>
もちろん、jsの中身を参考サイトを参照しながら書き換えるだけで綺麗なグラフを作ることができます！
コメント
コメントを投稿