现在我正在尝试从我的MySQL数据库中的JSON输出创建一个饼图。我对JavaScript很陌生,这就是为什么我要求你提供一些帮助。
我找到了以下project并稍微改了一下。但现在我的问题是我在饼图中添加了81个不同的值,但如果我尝试在data.addRow()
中添加更多数据,则会收到错误消息,表明数据多于预期。如何为饼图加载所有行?
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var jsonData = $.ajax({
url: "FetchDate.php",
dataType:"json",
async: false
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'VoteName');
data.addColumn('number', 'VoteCount');
$.each(results, function (i, row) {
var strData = "vt".concat(i);
data.addRow([
strData,
parseFloat(row.vt0)
]);
});
});
// Set chart options
var options = {'title':'My Pie Chart',
'width':600,
'height':600};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
我的JSON输出:
[{"id":"1","name":"improvisiertester Unterricht","vt0":"0","vt1":"0","vt2":"0","vt3":"0","vt4":"1","vt5":"0","vt6":"0","vt7":"0","vt8":"0","vt9":"0","vt10":"0","vt11":"0","vt12":"0","vt13":"0","vt14":"0","vt15":"0","vt16":"0","vt17":"0","vt18":"0","vt19":"0","vt20":"0","vt21":"0","vt22":"0","vt23":"0","vt24":"0","vt25":"0","vt26":"0","vt27":"0","vt28":"3","vt29":"2","vt30":"0","vt31":"12","vt32":"0","vt33":"0","vt34":"0","vt35":"1","vt36":"0","vt37":"0","vt38":"0","vt39":"0","vt40":"1","vt41":"2","vt42":"0","vt43":"0","vt44":"1","vt45":"0","vt46":"1","vt47":"0","vt48":"0","vt49":"0","vt50":"0","vt51":"0","vt52":"0","vt53":"0","vt54":"0","vt55":"0","vt56":"0","vt57":"0","vt58":"1","vt59":"0","vt60":"1","vt61":"0","vt62":"0","vt63":"0","vt64":"0","vt65":"0","vt66":"0","vt67":"0","vt68":"0","vt69":"0","vt70":"0","vt71":"0","vt72":"0","vt73":"0","vt74":"0","vt75":"0","vt76":"0","vt77":"0","vt78":"0","vt79":"0","vt80":"0","vt81":"0","alreadyVoted":",66,78,30,67,39,37,79,75,81,32,11,3,56,18,28,46,16,6,17,9,35,64,58,68,41"}]
Explination: id是我问题中的特定ID 名字就是问题 vt1-81是可能的答案以及有人投票的频率 alreadyVoted存储所有投票的用户ID
感谢您的时间和工作!!!
答案 0 :(得分:2)
var data;
var chart;
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']});
function drawChart() {
var results = [{"count":1,"year":"2009 "},{"count":3,"year":"2011 "},{"count":5,"year":"2012 "},{"count":9,"year":"2013 "},{"count":2,"year":"2014 "},{"count":1,"year":"2015 "},{"count":59,"year":"2016 "},{"count":4,"year":"2017 "}]
data = new google.visualization.DataTable();
data.addColumn('string', 'VoteName');
data.addColumn('number', 'VoteCount');
results.forEach(function(data1, index) {
data.addRow([data1.year,data1.count]);
});
var options = {title: 'My Pie Chart- Lujan',
width: 600,
height: 600};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);}
function selectHandler() {
// be sure something is selected
if (chart.getSelection().length) {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);}
} **strong text**
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
答案 1 :(得分:1)
帖子中的JSON包含一个包含一个元素的数组,该元素有多个键......
因此,不要使用$.each
迭代元素,而是使用Object.keys
...
参见以下工作示例......
var data;
var chart;
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var results = [{"id":"1","name":"improvisiertester Unterricht","vt0":"0","vt1":"0","vt2":"0","vt3":"0","vt4":"1","vt5":"0","vt6":"0","vt7":"0","vt8":"0","vt9":"0","vt10":"0","vt11":"0","vt12":"0","vt13":"0","vt14":"0","vt15":"0","vt16":"0","vt17":"0","vt18":"0","vt19":"0","vt20":"0","vt21":"0","vt22":"0","vt23":"0","vt24":"0","vt25":"0","vt26":"0","vt27":"0","vt28":"3","vt29":"2","vt30":"0","vt31":"12","vt32":"0","vt33":"0","vt34":"0","vt35":"1","vt36":"0","vt37":"0","vt38":"0","vt39":"0","vt40":"1","vt41":"2","vt42":"0","vt43":"0","vt44":"1","vt45":"0","vt46":"1","vt47":"0","vt48":"0","vt49":"0","vt50":"0","vt51":"0","vt52":"0","vt53":"0","vt54":"0","vt55":"0","vt56":"0","vt57":"0","vt58":"1","vt59":"0","vt60":"1","vt61":"0","vt62":"0","vt63":"0","vt64":"0","vt65":"0","vt66":"0","vt67":"0","vt68":"0","vt69":"0","vt70":"0","vt71":"0","vt72":"0","vt73":"0","vt74":"0","vt75":"0","vt76":"0","vt77":"0","vt78":"0","vt79":"0","vt80":"0","vt81":"0","alreadyVoted":",66,78,30,67,39,37,79,75,81,32,11,3,56,18,28,46,16,6,17,9,35,64,58,68,41"}];
data = new google.visualization.DataTable();
data.addColumn('string', 'VoteName');
data.addColumn('number', 'VoteCount');
// iterate "vt" keys
Object.keys(results[0]).forEach(function (key) {
if (key.indexOf("vt") > -1) {
data.addRow([
key,
parseFloat(results[0][key])
]);
}
});
var options = {
title: 'My Pie Chart',
width: 600,
height: 600
};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
// be sure something is selected
if (chart.getSelection().length) {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
添加ajax回调会看起来像这样......
var data;
var chart;
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'VoteName');
data.addColumn('number', 'VoteCount');
var jsonData = $.ajax({
url: "FetchDate.php",
dataType:"json",
async: false
}).done(function (results) {
// iterate "vt" keys
Object.keys(results[0]).forEach(function (key) {
if (key.indexOf("vt") > -1) {
data.addRow([
key,
parseFloat(results[0][key])
]);
}
});
});
var options = {
title: 'My Pie Chart',
width: 600,
height: 600
};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
// be sure something is selected
if (chart.getSelection().length) {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
}