我正在使用谷歌图表创建一个多级圆环图。 我成功地创建了一个单层图表。但现在我必须在该图表中创建另一个图表。 请帮我。还有,是否可以在图表切片上以圆形形式书写文本?
这是我的单 donut 聊天代码。
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
JS
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
chartArea:{left: '100'},
pieSliceText: 'label',
pieStartAngle: 0,
pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
这是JsFiddle中的代码链接 它应该看起来像
最佳答案
这可以通过 Google Image Charts API 实现,已于 2012 年弃用。它似乎仍在运行,只是不再维护了。
使用该 API,可以(现在仍然可以)创建如下图所示的同心饼图
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
产生以下饼图
您还可以在此处使用 API 并轻松创建自己的饼图: http://www.jonwinstanley.com/charts/
在新的 Google Charts API 中支持这种同心饼图仍然是 an open issue
关于javascript - 使用 Google Chart 创建多级圆环图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27422974/