基本的にぐーたら

プログラムを始めた学生の雑記

highchartsの使いかた (2)

f:id:HutabaH:20170629103513p:plain:w600

highchartsのデモ解説その2。

今回はBasic areaの解説です。

highchartsの説明はこちら。

hutabah.hatenablog.jp

Basic area

f:id:HutabaH:20170629103513p:plain:w600

Basic areaは折れ線グラフの領域を塗りつぶしたようなグラフです。

始めにソースコード

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container"></div>
  <script src="BasicArea.js"></script>
</body>
</html>

css

#container {
	width: 600px;
	height: 400px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('container', { //グラフ描画のテンプレート
    chart: { //グラフの種類
        type: 'area'
    },
    title: { //グラフのタイトル
        text: 'US and USSR nuclear stockpiles'
    },
    subtitle: { //グラフのサブタイトル
        text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
            'thebulletin.metapress.com</a>'
    },
    xAxis: { //x軸の設定
        allowDecimals: false, //falseで小数点以下を表示しない
        labels: {  //目盛りの数値の設定
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    yAxis: { //y軸の設定
        title: { //y軸のタイトル
            text: 'Nuclear weapon states'
        },
        labels: { //目盛りの数値の設定
            formatter: function () { //1000で割った値に'k'という文字を付け加える
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: { //マウスポインタを合わせた時に表示される詳細データ
        pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
    },
    plotOptions: { //点の設定
        area: { //グラフの種類を指定
            pointStart: 1940, //1940年から書き始める
            marker: { //プロット点の設定
                enabled: false, //プロット点を常時表示しない
                symbol: 'circle', //プロット点を円で描画する
                radius: 2, //円の大きさ
                states: {
                    hover: { //マウスポインタを合わせた時の設定
                        enabled: true //マウスポインタを合わせた時に表示する
                    }
                }
            }
        }
    },
    series: [{ //グラフの中身(データの設定)
        name: 'USA', //各データの名前
        data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
            1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
            27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
            26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
            24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
            22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
            10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
    },  {
        name: 'USSR/Russia',
        data: [null, null, null, null, null, null, null, null, null, null,
            5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
            4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
            15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
            33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
            35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
            21000, 20000, 19000, 18000, 18000, 17000, 16000]
    }]
});


Basic Lineとあまり変わらないですね。

新しい所だけ説明していきます。


chartsのtypeは当然areaです。

highchartsのtextではhtml表記で書けるので、ソースコードのサブタイトルのようにリンクを埋め込むことも出来ます。

他にも、javacriptらしくfunctionで関数を埋め込んでやることも出来ます。


xAxisのallowDecimalsはfalseにすると小数点以下を表示しなくなります。yAxisでも使えます。

labelで何をしているかはぶっちゃけ分かりません。正しい形式じゃない値を除外している?分かる人教えてください...


tooltipはマウスポインタを合わせた時に表示される詳細データの設定です。

{series.name}がserieaで指定したデータの名前、で囲っている文字は太文字表記になり、{point.y:,.0f}はy軸の値を小数点以下切り捨てで表示するということ、
は改行、そして{point.x}はx軸の値です。



こんな感じで。

ほんとにx軸の関数は何の意味があるのかわからないのですが、他のところは分かりやすいものしかなかったですね。

これでBasic areaはおしまい!


hutabah.hatenablog.jp

hutabah.hatenablog.jp