線グラフと散布図を重ねて表示するJavaScriptライブラリ

technical things

異なるグラフを重ねて表示させたものを Combination Charts と表現している様子。

Excel みたいに都合よくいろいろいじれるものって、まだ多くないんですかね... だからグラフ描画ライブラリを選ぶときは、必要な機能を列記する作業をして、それに見合うライブラリを探す必要があります。

〇 Google Chart が一番安パイかな...
Google Chart: Scatter Chart with a line · GitHub
Visualization: Combo Chart  |  Charts  |  Google Developers

<!doctype html>
<html>
  <head>
    <title>Google Chart: Scatter Chart with a line</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", { packages: ["corechart"] });
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Points', 'Line'],
          [3, 3.5, 6],
          [4, 5.5, 8],
          [4, 5, null],
          [6.5, 7, null],
          [8, 12, null],
          [11, 14, 22]
        ]);

        var options = {
          title: 'Scatter Chart with a line',
          hAxis: { title: 'X', minValue: 0, maxValue: 15 },
          vAxis: { title: 'Y', minValue: 0, maxValue: 15 },
          legend: 'none',
          interpolateNulls: true,
          series: {
            1: { lineWidth: 1, pointSize: 0 }
          }
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 500px;"></div>
  </body>
</html>

〇 highchart はクオリティ高い。ライセンス料死ぬほど高いけど。
だから安易に手を出さないで、いろいろライブラリを探してもいいかもしれません。
Scatter with regression line | Highcharts

〇 chart.js の場合は、ちょっと工夫が必要
Chart.js how to get Combined Bar and line charts? - Stack Overflow

〇 ccchart だと異なるグラフを重ねられない。
あと個人的にX座標に日付を記載できない。あと7,8桁以上の大きな数をデータとしてぶち込むと、maxX,maxY がうまく設定できず勝手な値が強制的にはいってしまうなどの挙動をどうしても直せず断念。
その点、Google Chart はでかい値をいれても動くし、日付も扱えそうなのでOKと。でも綺麗さ的には ccchart を採用したかった。
ccchart

〇 その他
Combination Charts in JavaScript & HTML5 | CanvasJS
http://www.fusioncharts.com/charts/combination-charts-single-y/




nihaoshijie.hatenadiary.jp