京都の技術者ロードローラーさんのブログ

GoogleChartsの第２弾、今回はScatterChartを触ってみました。

ScatterChart
https://developers.google.com/chart/interactive/docs/gallery/scatterchart

こちらは主に散布図を作成するものです。実は以前にJavaScriptで相関関数を算出したときに使っていました。（JavaScriptで相関関数の算出）

既に使用経験がありますし、だんだん慣れてきましたし、ちょっとGISっぽく画像上にデータをプロットしてみました。以下の画像ではラグビーのフィールド上にデータをプロットしています。（サンプルはコチラ）

ScatterChartには背景画像を設定する機能がどうもなかったようで、フィールド上へのデータプロットは次の手順で実現しました。

① divを配置してstyle-backgroundを任意の画像にする
② ScatterChartでデータプロットする
③ このときbackgroundColorをtransparent（透明）に設定

ただ座標の調節が難しいですね、そもそもラグビーの１０ｍラインは中央から１０ｍなのに対して、２２ｍラインはエンドラインから２２ｍだったりしますし。

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type='text/javascript'>
    
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {  
        console.log("START");
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'POSITION');
        data.addColumn('number', 'POSITION');
        
        $(function() {
          var rows = [[-50, -10],
                      [-50,   1],
                      [-22,  10],
                      [-10,  22],
                      [  0, -42],
                      [ 10,  22],
                      [ 22, -12],
                      [ 50,  -2],
                      [ 10,  45]];

                var options = {
                  width: 1000,
                  height: 560,
                  hAxis: {minValue: -50, maxValue: 50, textPosition: 'none', gridlines: {color: '#333', count: 0}, baselineColor: 'transparent' },
                  vAxis: {minValue: -50, maxValue: 50, textPosition: 'none', gridlines: {color: '#333', count: 0}, baselineColor: 'transparent'},
                  colors: ['#EE0022'],
                  pointShape: 'star',
                  pointSize: 20,
                  backgroundColor: 'transparent',
                  legend: 'none'
                };

                data.addRows(rows);
                var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
                chart.draw(data, options);
        });     
    }    
</script>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

console.log("START");

var data = new google.visualization.DataTable();

data.addColumn('number', 'POSITION');

$(function() {

var rows = [[-50, -10],

[-50, 1],

[-22, 10],

[-10, 22],

[ 0, -42],

[ 10, 22],

[ 22, -12],

[ 50, -2],

[ 10, 45]];

var options = {

width: 1000,

height: 560,

hAxis: {minValue: -50, maxValue: 50, textPosition: 'none', gridlines: {color: '#333', count: 0}, baselineColor: 'transparent' },

vAxis: {minValue: -50, maxValue: 50, textPosition: 'none', gridlines: {color: '#333', count: 0}, baselineColor: 'transparent'},

colors: ['#EE0022'],

pointShape: 'star',

pointSize: 20,

backgroundColor: 'transparent',

legend: 'none'

};

data.addRows(rows);

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

chart.draw(data, options);

});

}

</script>

<div id="chart_div" 
     style="width: 1000px;
            height: 560px; 
            background-image: url('https://r2d.info/***.png'); 
            background-repeat: no-repeat; 
            background-position: center center;">
</div>

<div id="chart_div"

style="width: 1000px;

height: 560px;

background-image: url('https://r2d.info/***.png');

background-repeat: no-repeat;

background-position: center center;">

</div>

今日はここまで

月	火	水	木	金	土	日
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

日: 2017年5月26日

GoogleChartsがおもしろい！（ScatterChart編）※サンプルプログラムあり