注釈の挿入 - 相場史データベース〜歴史は繰り返さないが韻を踏む〜

追加で出来事などを注釈としてグラフに表示するプログラムを考えたいと思います

chatGPTに相談します

以下スプレッドシートをWEB上でグラフ化したいので、協力してください
———————————————–
略
———————————————–
Googlechartを使ってWEB上でグラフ化するコードは以下の通りです
———————————————–
略
———————————————–
スプレッドシートのR列に注釈（annotation）を加えて、このグラフに反映させるためには、どのようなコードを書けば良いですか？

帰ってきた返事がこれ

Google Chartsを使用してスプレッドシートのR列の注釈をグラフに反映させるには、以下の手順に従ってコードを変更する必要があります。

Google Sheetsに注釈をR列に追加します。注釈は、各データポイントに対するテキストを提供します。注釈はセルのコメントとして追加できます。特定のセルに注釈を追加したら、そのセルにカーソルを合わせると表示されます。

スクリプトのhandleQueryResponse関数を変更して、注釈情報を取得し、グラフに追加します。

以下は、スクリプトの変更内容です。

<script>
  // ...

  function handleQueryResponse(response) {
    var data = response.getDataTable();

    // フォーマッターで、0,1,2,3,4の列のデータから作ったデータを格納
    var formatter1 = new google.visualization.PatternFormat('日経平均終値 {1} 円');
    formatter1.format(data, [0, 1], 1);

    var formatter2 = new google.visualization.PatternFormat('MA5 {1} 円');
    formatter2.format(data, [0, 2], 2);

    var formatter3 = new google.visualization.PatternFormat('MA25 {1} 円');
    formatter3.format(data, [0, 3], 3);

    var formatter4 = new google.visualization.PatternFormat('MA75 {1} 円');
    formatter4.format(data, [0, 4], 4);

    // 注釈情報を取得し、データテーブルに追加
    var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1hg_uGFX-gw5eJ6UucLUfy-dY9lU29r4ocnVZzAIAPEI/gviz/tq?range=R18253:R');
    query2.send(function (response2) {
      if (response2.isError()) {
        console.error('Error loading annotation data: ' + response2.getMessage());
        return;
      }

      var annotationData = response2.getDataTable();
      data.addColumn({ type: 'string', role: 'annotation' });
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        var annotation = annotationData.getValue(i, 0); // R列から注釈を取得
        data.setValue(i, 5, annotation); // 5は注釈用の列のインデックス（適宜調整してください）
      }

      var options = {
        title: 'NK225',
        width: 800,
        height: 500,
        legend: 'none', // デフォルトの設定
        annotations: {
          textStyle: {
            fontSize: 12,
            color: 'blue', // 注釈のテキストカラーを設定
          },
        },
      };

      var chart = new google.visualization.LineChart(document.getElementById('myLineChart'));
      chart.draw(data, options);
    });
  }
</script>

このコードでは、query2を使用してスプレッドシートのR列から注釈情報を取得し、データテーブルに新しい列として追加します。注釈のテキストカラーはオプションで設定できます。注釈情報は、annotationsオプションを使用してカスタマイズできます。

これで、スプレッドシートのR列の注釈がグラフに反映されるはずです。必要に応じて、注釈のスタイルや表示方法をカスタマイズしてください。

上記のコードを追加して試してみます
全然ダメでした

この後、ああでもない、こうでもないと、chatGPTと相談しながら、他のサイトを参照しながらなんとかできたコードがこれ

<body>
  <div id="myLineChart"></div>

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1hg_uGFX-gw5eJ6UucLUfy-dY9lU29r4ocnVZzAIAPEI/gviz/tq?range=A18000:R'); // クエリのURLを修正
  query.setQuery('SELECT A, B, C, D, E, R'); // クエリ文字列を修正
  query.send(handleQueryResponse);
};

    
    function handleQueryResponse(response) {
      var data = response.getDataTable();

      // フォーマッターで、 0,1,2,3,4 の列のデータから作ったデータを格納
      var formatter1 = new google.visualization.PatternFormat('日経平均終値 {1} 円');
      formatter1.format(data, [0, 1], 1);

      var formatter2 = new google.visualization.PatternFormat('MA5 {1} 円');
      formatter2.format(data, [0, 2], 2); 

      var formatter3 = new google.visualization.PatternFormat('MA25 {1} 円');
      formatter3.format(data, [0, 3], 3); 

      var formatter4 = new google.visualization.PatternFormat('MA75 {1} 円');
      formatter4.format(data, [0, 4], 4); 


  // R列のデータ型をテキストに設定
  data.setColumnLabel(5, 'R'); // 列のラベルを設定
  data.setColumnProperties(5, {
    type: 'string',
    role: 'annotation'
  });

var options = {
  title: 'NK225',
  width: 800,
  height: 500,
  legend: 'none', // デフォルトの設定
  // 注釈を自動配置するオプション
  annotations: {
    alwaysOutside: true, // 注釈をデータポイントの外側に配置
    textStyle: {
      fontSize: 15 // 注釈のフォントサイズを設定
    }
  }
};

        var chart = new google.visualization.LineChart(document.getElementById('myLineChart'));
        chart.draw(data, options);
    }
  </script>
</body>

そして実行したのがこれ

グラフと注釈がかぶっちゃってイマイチです
注釈の位置や引き出し線など、ちょっと装飾を考えたいと思います