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变量不可用。

见以下，工作示例......

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

如何在Google图表上显示从Google电子表格中提取数据的注释？

1 个答案: