javascript - 如何在从 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 函数需要包含在与图表相同的范围内。
在提供的 fiddle 中，调整窗口大小时会发生错误，
因为 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>