在谷歌条形图中绘制一条横跨条形图的平均线,可以通过以下步骤实现:
以下是一个示例代码,演示如何使用谷歌图表库绘制一条横跨条形图的平均线:
// 引入谷歌图表库
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// 准备数据集
var data = google.visualization.arrayToDataTable([
['类别', '数值'],
['类别1', 100],
['类别2', 200],
['类别3', 150],
['类别4', 300]
]);
// 计算平均值
var average = 0;
var numRows = data.getNumberOfRows();
for (var i = 0; i < numRows; i++) {
average += data.getValue(i, 1);
}
average /= numRows;
// 创建图表对象
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// 设置图表选项
var options = {
annotations: {
textStyle: {
fontSize: 12,
color: 'black'
},
stem: {
color: 'transparent'
},
style: 'line'
}
};
// 绘制图表
chart.draw(data, options);
// 添加平均线
var averageLine = chart.createAnnotation();
averageLine.setProperties({
type: 'line',
xValue: 0,
yValue: average,
x2Value: numRows - 1,
y2Value: average,
lineWidth: 1,
color: 'red'
});
chart.draw(data, options);
}
以上代码中,首先引入了谷歌图表库,并在页面加载完成后调用drawChart
函数来绘制图表。在drawChart
函数中,创建了一个数据集,并计算出平均值。然后,创建了一个条形图对象,并设置了图表选项。最后,通过调用createAnnotation
方法创建了一条平均线,并将其添加到图表中。
请注意,以上示例代码仅用于演示如何在谷歌条形图中绘制一条横跨条形图的平均线。实际应用中,您可能需要根据具体需求进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云