Google visualization 谷歌图表API-鼠标点击更改值（设置值）
我已经从谷歌图表API创建了一个甜甜圈图表。单击每个切片时，它应增加10个单位，并将相邻切片（顺时针）减少10个单位。到目前为止，我有一个警报弹出窗口来解释这一点，但我想用新的值重新绘制图表 这是我的密码：Google visualization 谷歌图表API-鼠标点击更改值（设置值）,google-visualization,graph-visualization,Google Visualization,Graph Visualization,我已经从谷歌图表API创建了一个甜甜圈图表。单击每个切片时，它应增加10个单位，并将相邻切片（顺时针）减少10个单位。到目前为止，我有一个警报弹出窗口来解释这一点，但我想用新的值重新绘制图表 这是我的密码： <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></sc
<html>
<head>
<!--Load the AJAX API-->
<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', 'Option');
data.addColumn('number', 'Value');
data.addRows([
['Option A', 40],
['Option B', 30],
['Option C', 30]
]);
// Set chart options
var options = {
height: 300,
fontName: 'Lato, sans-serif',
title: 'Values per option',
titleTextStyle: {
color: '#5a5a5a',
fontSize: 20,
bold: true,
align: 'center'
},
pieHole: 0.6,
slices: {
0: {color: 'red'},
1: {color: 'blue'},
2: {color: 'green'}
},
legend: {
position: 'bottom',
textStyle: {
color: '#5a5a5a',
fontSize: 14
}
},
enableInteractivity: true,
pieSliceText: 'none'
};
// 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];
if (selectedItem && selectedItem.row <2) {
var activeTrait = data.getValue(selectedItem.row, 0);
activePerc = data.getValue(selectedItem.row, 1);
activePercNew = parseInt(activePerc)+10
adjaceTrait = data.getValue(selectedItem.row+1, 0);
adjacePerc = data.getValue(selectedItem.row+1, 1);
adjacePercNew = parseInt(adjacePerc)-10
alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
}
if (selectedItem && selectedItem.row == 2) {
var activeTrait = data.getValue(selectedItem.row, 0);
activePerc = data.getValue(selectedItem.row, 1);
activePercNew = parseInt(activePerc)+10
adjaceTrait = data.getValue(selectedItem.row-2, 0);
adjacePerc = data.getValue(selectedItem.row-2, 1);
adjacePercNew = parseInt(adjacePerc)-10
alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:800; height:300"></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'，'Option'）；
data.addColumn（'number'，'Value'）；
data.addRows([
[‘方案A’，40]，
[‘选项B’，30]，
[“选择C”，30]
]);
//设置图表选项
变量选项={
身高：300，
fontName:'Lato，无衬线'，
标题：“每个选项的值”，
titleTextStyle：{
颜色：“#5A5A”，
尺寸：20，
黑体字：对，
对齐：“居中”
},
pieHole:0.6，
切片：{
0:{颜色：'红色'}，
1:{颜色：'蓝色'}，
2:{颜色：'绿色'}
},
图例：{
位置：'底部'，
文本样式：{
颜色：“#5A5A”，
尺寸：14
}
},
使能互动性：正确，
请输入文本：“无”
};
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
函数selectHandler（）{
var selectedItem=chart.getSelection（）[0]；
如果（selectedItem&&selectedItem.row）
是的，你已经差不多做到了，而且你的答案肯定是正确的。你可以使用data.setValue（）来调整你的值，然后在你的第二个“if”语句中有类似的内容：
data.setValue(selectedItem.row,1, activePercNew);
data.setValue(selectedItem.row-2,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);
在第一部分中也是一样的，但是使用selectedItem.row+1而不是selectedItem.row-2。或者，理想情况下，将该部分稍微整理一下，以便两个if语句找出您所指的内容，然后用一位代码重新绘制。例如，这里有一个调整后的处理程序函数，它也不依赖于有3个部分：
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;
// calculate the new values
var activePerc = data.getValue(curItem , 1);
var activePercNew = parseInt(activePerc)+10;
var adjacePerc = data.getValue(otherItem , 1);
var adjacePercNew = parseInt(adjacePerc )-10;
// 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);
}
}
函数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 activePerc=data.getValue（curItem，1）；
var activePercNew=parseInt（activePerc）+10；
var adjacePerc=data.getValue（其他项，1）；
var adjacePercNew=parseInt（adjacePerc）-10；
//更新图表
data.setValue（curItem，1，activePercNew）；
data.setValue（其他项，1，新项）；
图表绘制（数据、选项）；
//我们刚才单击的东西被重新绘制，因此它丢失了处理程序，请将其恢复：
google.visualization.events.addListener（图表'select'，selectHandler）；
}
}
你可能还想考虑一下如果一个值被强制为零会发生什么-这个解决方案将从图表中消失，然后下一个点击将强制一个无效的负值。n if语句。如果为0，则otherItem应更改为numRows-（curItem+otherItem）。这解决了切片强制为零时的问题。如果activePerc达到0，我也停止了脚本。并放置了重置按钮。再次感谢！