我正在使用谷歌图表创建一个多级甜甜圈图表。 我成功创建了单级图表。但现在我必须在该图表中创建另一个图表。 请帮我。还有可能以圆形形式在图表切片上写文字吗?
这是我的单个甜甜圈聊天的代码。
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中的代码链接 它看起来应该是这样的
答案 0 :(得分:10)
这可以通过2012年已被弃用的Google Image Charts API来实现。它似乎仍然正常运行,不再维护了。
使用该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
答案 1 :(得分:3)
我知道这已经是很久以前的事了,但这里有一种方法可以做到这一点,使用谷歌图表:
但是,我删除了字幕,因为它们会干扰物体的位置,我认为如果我们做字幕会更容易也更好。然后我只是画了一些绘图和数学来实现这一点。
您可以使用 3 个变量来控制大小和 pieHole。
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
$this->middleware('signed')->only('verify');
$this->middleware('throttle:6,1')->only('verify', 'resend');
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.6;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['python', 20],
['c#', 20],
['javascript', 20],
['php', 20],
['sql server', 20],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}