javascript - Google チャートにストロークを追加する

Question

Google エリア チャートを作成し、以下のスクリーンショットのように pointSize を 5 に設定しました。

下の画像のようにポイントにストロークを追加する方法はありますか?

Answer 1

これが簡単な解決策です。各点のスタイルはプログラムで定義されます。これは、ロール「スタイル」を持つデータテーブルに列を追加し、単純なループを使用してそのスタイルをすべてのポイントに追加することによって行われます。JSFiddle を試す: https://jsfiddle.net/m45z7mmp/

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var dataArray = [
      ['X', 'Y', {
        'type': 'string',
        'role': 'style'
      }],
      [1, 3],
      [2, 2.5],
      [3, 3],
      [4, 4],
    ];

    for (i = 1; i < dataArray.length; i++) {
      dataArray[i].push('point {stroke-width: 2;  stroke-color: #e97b2c; fill-color: #eeeeee }');
    }

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
      colors: ['#e97b2c'],
      pointSize: 8,
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }