Я использую API Google Charts для создания интерактивной круговой диаграммы, которая реагирует на щелчки мыши. Нажимая на любой сегмент, он должен увеличить его на 5% и уменьшить сегмент влево на 5%. Это мой код:Получить pieStartValue API Google Карт
<!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>
Я знаю, что еще не совершенен. Но если вы нажмете один раз на вариант A (синий), он отлично работает. Если вы нажмете один раз на Option B (зеленый), он отлично работает. Если вы нажмете один раз на Option C (желтый), он также отлично работает. Но если вы нажмете второй раз на опции C (желтый), вращение будет неправильным. Первый клик инициировал pieStartAngle 18 градусов (5%).
Итак, мой вопрос: как я могу получить текущий pieStartAngle между щелчками мыши? Если угол изменился, я бы хотел, чтобы новый щелчок на Option C повернул диаграмму еще на 18 градусов. И так далее. Мне нужен новый угол, чтобы добавить к нему 18 градусов.
HeatherEMSL - Спасибо за вашу помощь еще раз. Я уточнил свой вопрос, чтобы быть более точным. Я хотел бы постоянно поворачивать диаграмму в том же направлении, если я нажму на Option C. Таким образом, оригинальный startAngle (0) + 18 градусов, то новый щелчок повернет startangle до 18 + 18 градусов. Я попробовал вариант var pieAngle, который вы мне дали, но затем потерял всю функциональность на графике. – wernerfeuer
А в этом случае вам просто нужно сделать options.pieStartAngle + = 18; перед каждым перерисованием. Обновление моего ответа ... – HeatherEMSL
Это сделало трюк! – wernerfeuer