Google visualization 从谷歌图表API获取pieStartValue
我正在使用GoogleCharts API创建一个交互式饼图，在鼠标点击时做出响应。通过单击任何分段，应将其增加5%，并将左侧分段减少5%。这是我的代码：Google visualization 从谷歌图表API获取pieStartValue,google-visualization,Google Visualization,我正在使用GoogleCharts API创建一个交互式饼图，在鼠标点击时做出响应。通过单击任何分段，应将其增加5%，并将左侧分段减少5%。这是我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Index');
data.addColumn('number', 'Emphasis');
data.addColumn('number', 'Position');
data.addRows([
['Option A', 20, 1],
['Option B', 30, 2],
['Option C', 50, 3]
]);
// Set chart options
var options = {
height: 300,
pieStartAngle: 0,
slices: {
0: {color: 'blue'},
1: {color: 'green'},
2: {color: 'yellow'}
},
enableInteractivity: false,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var numRows = data.getNumberOfRows();
// verify the selection isn't inexplicibly invalid
if (selectedItem && selectedItem.row < numRows && selectedItem.row >= 0) {
// find the two items we're looking at
var curItem = selectedItem.row;
// we either want selected.row + 1 or we want 0 if the selected item was the last one
var otherItem = selectedItem.row == numRows - 1 ? 0 : selectedItem.row + 1;
var otherItemValue = data.getValue(otherItem , 1);
if (otherItemValue == 0) {
var numRowsNew = data.getNumberOfRows();
var otherItem = numRows - (curItem + otherItem);
}
if (otherItem==0) {
var options = {
height: 300,
pieStartAngle: 18,
slices: {
0: {color: 'blue'},
1: {color: 'green'},
2: {color: 'yellow'}
},
enableInteractivity: false,
};
} else {
var options = {
height: 300,
pieStartAngle: 0,
slices: {
0: {color: 'blue'},
1: {color: 'green'},
2: {color: 'yellow'}
},
enableInteractivity: false,
};
}
// calculate the new values
var activePerc = data.getValue(curItem , 1);
var activePercNew = parseInt(activePerc)+5;
var adjacePerc = data.getValue(otherItem , 1);
var adjacePercNew = parseInt(adjacePerc )-5;
if (activePerc == 100) {
} else {
// update the chart
data.setValue(curItem,1, activePercNew);
data.setValue(otherItem,1, adjacePercNew);
chart.draw(data, options);
// the thing we just clicked on was redrawn so it lost its handler, reinstate it:
google.visualization.events.addListener(chart, 'select', selectHandler);
}
}
}
function resize () {
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Index'）；
data.addColumn（'number'，'Emphasis'）；
data.addColumn（'number'，'Position'）；
data.addRows([
['方案A'，20，1]，
[‘方案B’，30，2]，
[‘方案C’，50，3]
]);
//设置图表选项
变量选项={
身高：300，
pieStartAngle:0，
切片：{
0:{color:'blue'}，
1:{颜色：'绿色'}，
2:{颜色：'黄色'}
},
EnableInteractive:false，
};
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
函数selectHandler（）{
var selectedItem=chart.getSelection（）[0]；
var numRows=data.getNumberOfRows（）；
//验证所选内容是否存在无法解释的无效
如果（selectedItem&&selectedItem.row=0）{
//找到我们正在查看的两个项目
var curItem=selectedItem.row；
//我们需要selected.row+1，或者如果所选项目是最后一个项目，则需要0
var otherItem=selectedItem.row==numRows-1？0:selectedItem.row+1；
var otherItemValue=data.getValue（otherItem，1）；
如果（otherItemValue==0）{
var numRowsNew=data.getNumberOfRows（）；
var otherItem=numRows-（curItem+otherItem）；
}
如果（其他项==0）{
变量选项={
身高：300，
皮斯塔坦格：18岁，
切片：{
0:{color:'blue'}，
1:{颜色：'绿色'}，
2:{颜色：'黄色'}
},
EnableInteractive:false，
};
}否则{
变量选项={
身高：300，
pieStartAngle:0，
切片：{
0:{color:'blue'}，
1:{颜色：'绿色'}，
2:{颜色：'黄色'}
},
EnableInteractive:false，
};
}
//计算新值
var activePerc=data.getValue（curItem，1）；
var activePercNew=parseInt（activePerc）+5；
var adjacePerc=data.getValue（其他项，1）；
var adjacePercNew=parseInt（adjacePerc）-5；
如果（activePerc==100）{
}否则{
//更新图表
data.setValue（curItem，1，activePercNew）；
data.setValue（其他项，1，新项）；
图表绘制（数据、选项）；
//我们刚才单击的东西被重新绘制，因此它丢失了处理程序，请将其恢复：
google.visualization.events.addListener（图表'select'，selectHandler）；
}
}
}
函数调整大小（）{
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}
window.onload=resize（）；
window.onresize=调整大小；
google.visualization.events.addListener（图表'select'，selectHandler）；
图表绘制（数据、选项）；
}
所以我的问题是：如何获得鼠标点击之间的当前pieStartAngle？如果角度改变了，我希望新的点击选项C将图表再旋转18度。等等我需要新的角度来增加18度。选项变量是一个简单的JS对象，因此您可以使用options.pieStartAngle来访问它-用于获取和设置 因此，要获取两次单击之间的值（重绘之前或之后），可以使用：
var pieAngle = options.pieStartAngle;
options.pieStartAngle = 0;