HighChartsでRadar Chartを描く

せっかく HighMapsでmapbubbleな世界地図を をやったので、同じデータをRadar Chartで描いてみよう。 HighCharts.com の世界では Polar Chart とか SpidarWeb とか呼ぶようだが、ここでは radar chart と呼んでいる。

HighMapsでmapbubbleな世界地図を では HighMaps を使ったが、今度は HighCharts を使う。

HighCharts.com は売り物なので、必要に応じて ライセンス を調達してください。 条件があえば無料で使えるようです。

基本描画

まずは、CSV読み込みをやらずにデータ固定のもの。

Radar Chart 1

ソースはこれ。

 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
<html>
<head>
  <title>Radar Chart 1</title>
  <script src="//code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
  <script src="//code.highcharts.com/highcharts.js"></script>
  <script src="//code.highcharts.com/highcharts-more.js"></script>
  <script src="//code.highcharts.com/modules/exporting.js"></script>
  <script src="//code.highcharts.com/modules/offline-exporting.js"></script>
</head>
<body>
  <script type="text/javascript">
  $(function() {
      var radaropts1 = {
              chart: {renderTo: 'radarchart1', polar: true}
            , title: {text: 'Radar Chart No.1'}
            , xAxis: {categories: ['Series-A', 'Series-B', 'Series-C'],
                      tickmarkPlacement: 'on'}
            , yAxis: {title: {text: 'score'}}
            , tooltip: {valueDecimals: 2}
            , series: [{name: 'JP', data: [80, 40, 50]},
                       {name: 'US', data: [60, 95, 25]},
                       {name: 'CN', data: [30, 65, 90]}]
        };
      // console.log(radaropts1);
      var radarchart1 = new Highcharts.Chart(radaropts1);
  });
  </script>
  <div id="radarchart1" style="width: 100%;"></div>
</body>
</html>
  • 8行目、radar chartを描くためには、highcharts.jsに加えてhighcharts-more.jsが必要。
  • 15行目、他と同様にまずoptions(ここではradaropts1)を作っておいて、27行目 Charts()を呼ぶことでグラフを描くことができる。mapCharts()ではない点に注意。
  • 16行目、radaropts1.chart.polarをtrueにすることでradar chartになる。これがfalseだと普通の折れ線グラフ。
  • 18行目、radaropts1.xAxis.categoriesにはradar chartの軸(複数)の名前ラベルを列挙する。しなくてもいいけど、まあ必要よね。
  • 22行目、radaropts1.series にデータを列挙する。series[i].data の配列は、categoriesに並べた軸名の順にデータを並べること。name: ‘JP’ のシリーズで環状の折れ線グラフが1個できて、data 配列内のデータは順に categoriesに並んだ軸に対応する。
  • 次のCSV読み込み型の例と干渉するようでグラフの形があまり美しくないが、クリックして個別ページを見てもらえばそこそこ良いデフォルト調整が入ることがわかると思います。

CSVから読み込み

続いて CSV 読み込み型。

どうも上の図と干渉して形が崩れるのでリンク先を御覧ください。

ソースはこれ。

 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
<html>
<head>
  <title>Radar Chart 2</title>
  <script src="//code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
  <script src="//code.highcharts.com/highcharts.js"></script>
  <script src="//code.highcharts.com/highcharts-more.js"></script>
  <script src="//code.highcharts.com/modules/exporting.js"></script>
  <script src="//code.highcharts.com/modules/offline-exporting.js"></script>
</head>
<body>
  <script type="text/javascript">
  $(function() {
    $.get('/_static/mapbubble5.csv',
      function(data) {
        var radaropts2 = {
              chart: {renderTo: 'radarchart2', polar: true}
            , title: {text: 'Radar Chart No.2'}
            , xAxis: {categories: [], tickmarkPlacement: 'on'}
            , yAxis: {title: {text: 'score'}}
            , tooltip: {valueDecimals: 2}
            , series: []
        };
        var lines = data.split('\n');
        $.each(lines,
               function(lineNo, line) {
                 if (line == '') {
                   return true;    // continue to the next line.
                 }
                 var items = line.split(',');
                 $.each(items,
                        function(itemNo, item) {
                          if (lineNo == 0 && itemNo > 0) {
                            radaropts2.xAxis.categories.push(item);
                          } else if (lineNo > 0) {
                            if (itemNo == 0) {
                              radaropts2.series.push({name: item, lineNo: lineNo, data: [], visible: (lineNo % 2 ? true : false)});
                            } else if (itemNo > 0) {
                              radaropts2.series.filter(function(member, index) {
                                  if (member.lineNo == lineNo) {
                                    return true;
                                  } else {
                                    return false;}
                                  })[0].data.push(Number(item));
                            }
                          }
                        });
               });
      // console.log(radaropts2);
      var radarchart2 = new Highcharts.Chart(radaropts2);
    });
  });
  </script>
  <div id="radarchart2" style="width: 100%;"></div>
</body>
</html>
  • まず、radaropts2設定は15行目からのCSVファイル読み込みルーチンの冒頭で行っている。
  • 20行目の radaropts1.XAxis.categories がからの配列 [] であることに注意。CSVから読み込んだデータをここへ入れるにはどうするか、が今回のお題。
  • 34行目以降、CSVを読み込みつつ適宜 radaropts2.xAxis.categories や series[i].data にデータを入れていく。

まとめ

これで radar chart によって国(でなくてもいいけど)別の比較ができるだろう。

2017/Jul/02 頃書いた。mk