要使甜甜圈Google图表在div内响应,可以按照以下步骤进行操作:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut-chart"></div>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawDonutChart);
function drawDonutChart() {
// 创建数据表
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// 设置图表选项
var options = {
title: 'My Pizza',
pieHole: 0.4
};
// 实例化图表对象并绘制图表
var chart = new google.visualization.PieChart(document.getElementById('donut-chart'));
chart.draw(data, options);
}
在上述代码中,我们通过调用google.visualization.PieChart
构造函数来创建一个甜甜圈图表对象,并将其绘制在具有指定id的<div>元素中。
#donut-chart {
width: 400px;
height: 300px;
}
通过以上步骤,你可以在指定的<div>元素内实现一个响应式的甜甜圈Google图表。请注意,这只是一个示例,你可以根据自己的需求和数据进行相应的修改和定制。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云