GoogleChartsの第2弾、今回はScatterChartを触ってみました。
ScatterChart
https://developers.google.com/chart/interactive/docs/gallery/scatterchart
こちらは主に散布図を作成するものです。実は以前にJavaScriptで相関関数を算出したときに使っていました。(JavaScriptで相関関数の算出)
既に使用経験がありますし、だんだん慣れてきましたし、ちょっとGISっぽく画像上にデータをプロットしてみました。以下の画像ではラグビーのフィールド上にデータをプロットしています。(サンプルはコチラ)
ScatterChartには背景画像を設定する機能がどうもなかったようで、フィールド上へのデータプロットは次の手順で実現しました。
① divを配置してstyle-backgroundを任意の画像にする
② ScatterChartでデータプロットする
③ このときbackgroundColorをtransparent(透明)に設定
ただ座標の調節が難しいですね、そもそもラグビーの10mラインは中央から10mなのに対して、22mラインはエンドラインから22mだったりしますし。
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 |
<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> |
1 2 3 4 5 6 7 |
<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> |
今日はここまで