Googleスプレッドシートからデータを抽出するGoogleグラフにアノテーションを表示するにはどうすればよいですか？

Question

私はいくつかのデータを表示するGoogle Chartを持っています。 CSSここ

<div id="chart"></div> 

される - -

ここ

html, 
body { 
    width: 100%; 
    height: 100%; 
} 

#chart { 
    width: 100%; 
} 

はJSである - ここで

はHTMLで今

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

google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var query = new  google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B"); 

    query.send(handleQueryResponse); 
} 

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

    var chartAreaHeight = data.getNumberOfRows() * 10; 

    var chartHeight = chartAreaHeight + 70; 

    var options = { 
     title: "Andaman & Nicobar Islands", 
     legend: "none", 
     vAxis: { 
      title: "Year", 
      format: "0", 
     }, 
     hAxis: { 
      title: "Rainfall (in mm)" 
     }, 
     height: chartHeight, 
     chartArea: { 
      height: chartAreaHeight, 
      top: "100", 
      right: "100", 
      bottom: "100", 
      left: "100" 
     } 
    }; 

    var chart = new  google.visualization.BarChart(document.getElementById("chart")); 

    chart.draw(data, options); 
}; 

window.onresize = function (event) { 
    chart.draw(data, options); 
}; 

、私はバーの横に注釈を表示したいですそのバーの値を表示します。それ、どうやったら出来るの？ここで

は、注釈を追加注釈テキストの列を追加し、直接値を持つ列の後にするJSFiddle

Answer 1

です。

次の例では、DataViewを使用して、注釈の計算列を追加します。

また、resize関数は、chartと同じスコープに含める必要があります。
が提供されている場合、,data、およびoptions変数が使用できないため、
としてエラーが発生します。

以下を参照してください、作業例...

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

 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B"); 
 
    query.send(handleQueryResponse); 
 
} 
 

 
function handleQueryResponse(response) { 
 
    var data = response.getDataTable(); 
 
    var chartAreaHeight = data.getNumberOfRows() * 10; 
 
    var chartHeight = chartAreaHeight + 70; 
 
    var options = { 
 
    // add text style for annotation 
 
    annotations: { 
 
     textStyle: { 
 
     fontSize: 8 
 
     } 
 
    }, 
 
    title: "Andaman & Nicobar Islands", 
 
    legend: "none", 
 
    vAxis: { 
 
     title: "Year", 
 
     format: "0" 
 
    }, 
 
    hAxis: { 
 
     title: "Rainfall (in mm)" 
 
    }, 
 
    height: chartHeight, 
 
    chartArea: { 
 
     height: chartAreaHeight, 
 
     top: "100", 
 
     right: "100", 
 
     bottom: "100", 
 
     left: "100" 
 
    } 
 
    }; 
 

 
    // format data for annotation 
 
    var formatter = new google.visualization.NumberFormat({pattern: '#,##0.0'}); 
 
    formatter.format(data, 1); 
 

 
    // use view to add annotation column 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: "stringify", 
 
    sourceColumn: 1, 
 
    type: "string", 
 
    role: "annotation" 
 
    }]); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById("chart")); 
 
    chart.draw(view, options); 
 

 
    window.addEventListener('resize', function() { 
 
    chart.draw(view, options); 
 
    }, false); 
 
}

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#chart { 
 
    width: 100%; 
 
}

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