如何在Google圖表上顯示從Google電子表格中提取數據的注釋？

Question

我有一個顯示一些數據的Google圖表。

這是HTML -

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

這是CSS -

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

#chart {
    width: 100%;
}

這是JS -

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相同的范圍內。
在提供的小提琴中，調整窗口大小時會發生錯誤，
因為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>