The nvd3js_sample from yamk-yamk

使用方法

初めに

blockchain.infoに載っているような、標準的なチャートの作成についてまとめたページです。
http://nvd3-community.github.io/nvd3/
ここに、nvd3を使ったチャートのサンプルがあるので、
以下のチャート以外の形のチャートが作りたいとなった場合は、このリンク先を参考にしていただくといいと思ういます。

また、
http://nvd3.org/examples/index.html
こちらのリンク先にもサンプルがまとまって載っています。

Views

html > chartEasy.html

を開くと、

上記のようなチャートが表示されることが確認できる。
ここでは、このチャートのデータ構成などを確認していく。

head

<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>

    <style>
       ...
    </style>
</head>

styleの中身は特に重要でないのでskip。

nvd3を使うには、d3jsを先に読み込まないといけないので、
そのような読み込み順序になっている。
ライブラリの準備はこれだけで済む。

body

<body class='with-3d-shadow with-transitions'>
<div id="chart1"></div>
<script>
    // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
    var chart;
    var data;
    nv.addGraph(function() {
        chart = nv.models.lineChart()
            .options({
                duration: 300,
                useInteractiveGuideline: true
            });
        chart.xAxis
            .axisLabel("Time (s)")
            .tickFormat(d3.format(',.1f'))
            .staggerLabels(true);
        chart.yAxis
            .axisLabel('Voltage (v)')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                // 小数点以下の数字の指定
                return d3.format(',.2f')(d);
            });
        data = sinAndCos();
        d3.select('#chart1').append('svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
    function sinAndCos() {
        var sin = [],
            cos = [],
            rand = [],
            rand2 = [];
        for (var i = 0; i < 100; i++) {
            sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works
            cos.push({x: i, y: .5 * Math.cos(i/10)});
            rand.push({x:i, y: Math.random() / 10});
            rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
        }
        return [
            {
                area: true,
                values: sin,
                key: "Sine Wave",
                color: "#ff7f0e",
                strokeWidth: 4,
                classed: 'dashed'
            },
            {
                values: cos,
                key: "Cosine Wave",
                color: "#2ca02c"
            },
            {
                values: rand,
                key: "Random Points",
                color: "#2222ff"
            },
            {
                values: rand2,
                key: "Random Cosine",
                color: "#667711",
                strokeWidth: 3.5
            }
        ];
    }
</script>
</body>

まず、一番最初の、

<div id="chart1"></div>

とあるが、このdiv以下にチャートのhtmlがjsによって書き込まれていく。
idをscriptの中で指定していて、一致するidのところにチャートがかかれるという仕組み。

次に、jsの具体的な中身についてだが、

nv.addGraph(function() {
        chart = nv.models.lineChart()
            .options({
                duration: 300,
                useInteractiveGuideline: true
            })
        ;
        // 横軸の設定
        chart.xAxis
            .axisLabel("Time (s)")
            .tickFormat(d3.format(',.1f'))
            .staggerLabels(true)
        ;
        // 縦軸の設定
        chart.yAxis
            .axisLabel('Voltage (v)')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                // 小数点以下の数字の指定
                return d3.format(',.2f')(d);
            })
        ;

ここら辺は、チャート全体に関する設定をしている。

chart = nv.models.lineChart()

このコードによって、lineチャートの指定。
lineチャート以外のチャートを使用する場合には、.barChart()のような記述をおそらくすることになると思う。

        data = sinAndCos();
        d3.select('#chart1').append('svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

sinAndCos()でデータの準備をしている（配列を作っている）。

それを .datum()の引数に入れてやればよい。

    function sinAndCos() {
        var sin = [],
            cos = [],
            rand = [],
            rand2 = [];
        for (var i = 0; i < 100; i++) {
            sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works
            cos.push({x: i, y: .5 * Math.cos(i/10)});
            rand.push({x:i, y: Math.random() / 10});
            rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
        }
        return [
            {
                area: true,
                values: sin,
                key: "Sine Wave",
                color: "#ff7f0e",
                strokeWidth: 4,
                classed: 'dashed'
            },
            {
                values: cos,
                key: "Cosine Wave",
                color: "#2ca02c"
            },
            {
                values: rand,
                key: "Random Points",
                color: "#2222ff"
            },
            {
                values: rand2,
                key: "Random Cosine",
                color: "#667711",
                strokeWidth: 3.5
            }
        ];
    }

最終的な返り値が、

[ { 1つ目のラインのデータ }, { 2つ目のデータ }, ... ]

となっており、また、

values: [ x: ***, y: *** ]

というような形で、横軸・縦軸の値が決められている。

yamk-yamk / nvd3js_sample Goto Github PK

nvd3js_sample's People

Contributors

Watchers

nvd3js_sample's Issues

使用方法

初めに

Views

head

body

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent