pixiv insideは移転しました! ≫ https://inside.pixiv.blog/

簡単に綺麗なグラフを描くためのライブラリ、Hicharts.js

このブログでは初めまして。7つも8つもブログを持っているのに入社してからめっきりブログを書くペースが落ちてしまったedvakfです。

僕は昔からライブラリとかフレームワークというものにほとんど興味がなく、入社するまではjQueryすらほとんど使わずに生のDOMをJavaScriptでゴリゴリ触ってたクチなんですが、いやー、やっぱりjQueryは使いやすいですねー。

そんな僕ですが、会社で使っているライブラリぐらいは見ておこうと、ピクシブ百科事典というサービスを見ていたら、Highcharts.jsなるものがありました。はてなブックマークでは2009年に発見されていて、既に400を超えるブックマークがあるんですね。

Highcharts.jsは商業利用は有料ですが、非商業利用は無料です(ピクシブではもちろん有料版を利用しています)。

デモjsFiddle上でフォークして弄りながら見た目を調節したりすることができるのでとても馴染みやすいです。

しかし、なんといってもこのライブラリの優れた点は、グラフを出力するためのコードが非常にスッキリ書けることです。例えばこちらのデモだと、下のような具合です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
new Highcharts.Chart({
  chart: {
      renderTo: 'container',
      type: 'line',
      marginRight: 130,
      marginBottom: 25
  },
  title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
  },
  subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
  },
  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
      title: {
          text: 'Temperature (°C)'
      },
      plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
      }]
  },
  tooltip: {
      formatter: function() {
              return '<b>'+ this.series.name +'</b><br/>'+
              this.x +': '+ this.y +'°C';
      }
  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -10,
      y: 100,
      borderWidth: 0
  },
  series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

このようにnew Highcharts.Chart()にオプションを渡すだけで、ツールチップや拡大や印刷ビューなどがついてきます。

SVGを使って実装されていて、印刷やPDFエクスポートにはHighcharts側のサーバーを経由するみたいでした。

でも、お高いんでしょう?

それが…お高いんですよねー…