1. berry-clione

    Posted

    berry-clione
Changes in title
+Chart.jsで散布図を作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,125 @@
+# web上にグラフを表示させる
+
+> 今回初めてhtml, css, jsをちゃんと書いた
+> 超入門者向け
+
+グラフ描画をweb上でやりたい。
+フリーのライセンスで使えそうなものとして、Chart.jsを使ってみた。
+今回描画するのは散布図。
+
+### ファイル構成
+[作業ファイル]
+├── index.html
+├── stylesheet.css
+└── chartjs_exercise.js
+
+---
+
+## html
+
+```index.html
+<html>
+ <head>
+ <meta charset="utf-8">
+ <!-- Read chart.js 2.x. -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
+ <!-- Read a css file. -->
+ <link rel="stylesheet" type="text/css" href="stylesheet.css">
+ <title>chart.jsの練習</title>
+ </head>
+ <body>
+ <div id="chartContainer" style="height:70%; width:70%">
+ <!-- Show canvas here.-->
+ <canvas id="canvas"> </canvas>
+ </div>
+ <!-- Read a javascript file here below canvas. -->
+ <script src="chartjs_exercise.js"></script>
+ </body>
+</html>
+```
+
+---
+
+## css
+
+```stylesheet.css
+#canvas {
+ /*background: #000;*/
+ /*background: #FFF;*/
+ /*background: #C0C0C0;*/
+ background: #EEEEEE;
+
+ /*position: relative;*/
+}
+
+```
+
+---
+
+## javascript
+
+```chartjs_exercise.js
+window.chartColors = {
+ red: "#FF0000",
+ blue: "#00FF00"
+};
+
+var color = Chart.helpers.color;
+var scatter_data = {
+ datasets:[{
+ label: "schatter dots",
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ pointRadius: 10,
+
+ data: [{
+ x: 20.3,
+ y: 13.43
+ },{
+ x: 17.9,
+ y: 4.2
+ },{
+ x: 10.9,
+ y: 15.2
+ }]
+
+ }]
+};
+
+var ctx = document.getElementById('canvas').getContext('2d');
+window.myScatter = Chart.Scatter(ctx, {
+ data: scatter_data,
+ option:{
+ title: {
+ display: true,
+ text: "Chart.js Scatter Chart"
+ },
+ }
+});
+
+
+```
+
+---
+
+### サーバを立てる
+
+- 以下のコマンドでサーバを立て、[http://localhost:9000](http://localhost:9000)にアクセスする
+
+```zsh
+php -S localhost:9000
+```
+
+- もしくは、```index.html```をブラウザで直接読み込む
+
+---
+
+### 結果
+
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/133933/5d4cbe79-ad32-308f-48ed-f1600b60cfe4.png)
+
+
+<p data-height="265" data-theme-id="0" data-slug-hash="OZKbBa" data-default-tab="js" data-user="berry_clione" data-embed-version="2" data-pen-title="OZKbBa" class="codepen">See the Pen <a href="https://codepen.io/berry_clione/pen/OZKbBa/">OZKbBa</a> by Berry Clione (<a href="https://codepen.io/berry_clione">@berry_clione</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+