Javascript 如何在从谷歌电子表格中提取数据的谷歌图表上显示注释？_Javascript_Html_Css_Google Visualization

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

javascript html css google-visualization

Javascript 如何在从谷歌电子表格中提取数据的谷歌图表上显示注释？,javascript,html,css,google-visualization,Javascript,Html,Css,Google Visualization,我有一个显示一些数据的谷歌图表这是HTML- <div id="chart"></div> 这是JS- google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var query = new google.visualization.Quer

我有一个显示一些数据的谷歌图表

这是HTML-

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

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

现在，我想在显示该条值的条旁边显示注释。我该怎么做

下面是添加注释的方法，为注释文本添加一列，直接在包含值的列之后

在下面的示例中，使用

DataView

为注释添加计算列

此外，

调整大小

功能需要包括在与

图表

相同的范围内
在提供的小提琴中，调整窗口大小时将发生错误，
由于

图表

，

数据

和

选项

变量不可用

请参阅下面的工作示例

google.charts.load（'current'{
“包”：[“核心图表”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var query=new google.visualization.query（“https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B");
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
var data=response.getDataTable（）；
var chartAreaHeight=data.getNumberOfRows（）*10；
var chartHeight=chartAreaHeight+70；
变量选项={
//为注释添加文字样式
注释：{
文本样式：{
字体大小：8
}
},
标题：“安达曼和尼科巴群岛”，
图例：“无”，
言辞：{
标题：“年”，
格式：“0”
},
哈克斯：{
标题：“降雨量（单位：mm）”
},
高度：图表高度，
图表区：{
高度：图表区域高度，
顶部：“100”，
右：“100”，
底部：“100”，
左：“100”
}
};
//为注释设置数据格式
var formatter=new google.visualization.NumberFormat（{pattern:'#，##0.0'}）；
格式化程序。格式化（数据，1）；
//使用视图添加注释列
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}]);
var chart=新的google.visualization.BarChart（document.getElementById（“chart”）；
图表绘制（视图、选项）；
window.addEventListener（'resize'，函数（）{
图表绘制（视图、选项）；
}，假）；
}

html，
身体{
宽度：100%；
身高：100%；
}
#图表{
宽度：100%；
}

若要添加批注，请在带有值的列后面直接为批注文本添加一列