제가 구글 차트에 유포도를 그렸어요.

입문

과정의 팀 개발에서 산포도를 만들고 거기에 참여했기 때문에 출력하고 싶어요.

인도물

이렇게 하면 산포도를 만들 수 있다.

참조 소스

Google Charts (Scatter Charts)
또한 산포도의 원본 데이터로서 GuluNabiAPI에서 얻은 데이터를 이용하고 있다.
인형 API
※ 2021/1/15 이후에는 새로 사용할 수 없을 것 같습니다.

개발 환경

편집기:vscode

전체 소스 코드

index.html

　　 <div id="target" class="box" style="width: 700px; height: 500px;"></div>

    <script src="https://www.gstatic.com/charts/loader.js"></script>

    <!-- targetタグのdivに散布図を挿入-->
    <script src="js/googleScatter.js"></script>

googleScatter.js

const drawScatter = (result, userLatlng) => {
  google.charts.load('current', { 'packages': ['corechart'] });
  google.charts.setOnLoadCallback(drawChart);

  var mapLatlng = [
  ]

  function drawChart() {
    var data = new google.visualization.DataTable();

    // [距離、金額、店名]のデータテーブルを作成
    data.addColumn('number', '距離');
    data.addColumn('number', '金額');
    data.addColumn({ type: 'string', role: 'tooltip' });

    // ぐるなびAPIから情報を取得し、行を追加
    result.rest.map(item => {
      var latlng = new google.maps.LatLng(item.latitude, item.longitude);
      mapLatlng.push([item.latitude, item.longitude])
      var distance = google.maps.geometry.spherical.computeDistanceBetween(userLatlng, latlng);
      data.addRow([distance, item.budget, item.name]);
    });

    // mouseOnの時に表示される吹き出しを調整
    var formatter = new google.visualization.PatternFormat('店名　{2}  ：{0}m　：{1} 円 ');
    formatter.format(data, [0, 1, 2], 2);

    // 実際の散布図の設定
    var options = {
      title: '店の距離と金額',
      hAxis: { title: '距離', format: '###m', minValue: 0, maxValue: 15 },
      vAxis: { title: '金額', format: '###円', minValue: 0, maxValue: 15 },
      legend: 'none'
    };

    // コンテナに散布図を挿入
    var chart = new google.visualization.ScatterChart(document.getElementById('target'));

    // 散布図の店が押された時の処理を記入
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      // console.log(selection[0].row);
      map.panTo(new google.maps.LatLng(mapLatlng[selection[0].row][0], mapLatlng[selection[0].row][1]))
    });

    chart.draw(data, options);
  }
}

index.내용

산포도로 원본을 삽입할 용기를 준비한다

Google Charts의 사용 선언

googleScatter.js를 호출합니다

디버깅을 진행하다.

googleScatter.js 내용

1. 산포도 데이터의 원시 표의 구조를 묘사한다

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

    // [距離、金額、店名]のデータテーブルを作成
    data.addColumn('number', '距離');
    data.addColumn('number', '金額');
    data.addColumn({ type: 'string', role: 'tooltip' });

2. 테이블에 데이터 넣기

    // ぐるなびAPIから情報を取得し、行を追加
    result.rest.map(item => {
      var latlng = new google.maps.LatLng(item.latitude, item.longitude);
      mapLatlng.push([item.latitude, item.longitude])
      var distance = google.maps.geometry.spherical.computeDistanceBetween(userLatlng, latlng);
      data.addRow([distance, item.budget, item.name]);
    });

3. 산포도 속성 설정

// mouseOnの時に表示される吹き出しを調整
    var formatter = new google.visualization.PatternFormat('店名　{2}  ：{0}m　：{1} 円 ');
    formatter.format(data, [0, 1, 2], 2);

    // 実際の散布図の設定
    var options = {
      title: '店の距離と金額',
      hAxis: { title: '距離', format: '###m', minValue: 0, maxValue: 15 },
      vAxis: { title: '金額', format: '###円', minValue: 0, maxValue: 15 },
      legend: 'none'
    };

formatter 부분에서 {0} {1} {2}는 각각 표의'열 번호-1'을 표시합니다.
그러니까 이번에.
{0}= 거리
{1}= 금액
{2}= 가게 이름
옵션 부분에서 산포도의'제목, 가로축, 세로축'등을 설정합니다.
그 밖에 표의 첫 번째 열은 hAxis 요소이고, 두 번째 열은 vAxis 요소이다.

4. 용기에 만들어진chart를 삽입합니다

    // コンテナに散布図を挿入
    var chart = new google.visualization.ScatterChart(document.getElementById('target'));

5. 산포도를 클릭할 때의 처리를 기술한다

    // 散布図の店が押された時の処理を記入
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      // console.log(selection[0].row);
      map.panTo(new google.maps.LatLng(mapLatlng[selection[0].row][0], mapLatlng[selection[0].row][1]))
    });

파라미터에 "select"를 전달하면 그림을 뿌릴 때 점이 눌릴 때 이동합니다.
또한 변수selection 참고표의 index 부분.

6. 차트 그리기

    chart.draw(data, options);

반성점

변수의 성명 부분의 순서는 이해하기 어렵다

target에chart를 넣는다는 점은 더욱 최초의 측에 기술해야 한다

index.html의javascript를 호출하는 곳은 엉망진창입니다

원본 코드의 설명 방법은 매우 졸렬하다

마지막

이번에는 Qiita의 첫 투고였지만 원본 코드를 기술하기 어렵다는 설명을 알게 되었습니다.
나는 다른 투고자의 작법을 좀 더 참고하고 싶다.