让我简单介绍一下:过程如下:DB Method向侧脚本返回一个值 - >生成JSON - >发送到谷歌图表js文件。这将产生一个饼图图表,但它一直说第一列应该是一个字符串......它就是!代码:
PHP类方法:
<html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
接收器和发射器
function select_heuristic_piechart1(&$conn){
$query = ("SELECT hl_name AS name, count(hl_element2) As counted FROM `heuristic_listings` group by hl_element1");
$statement = $conn->prepare($query);
$statement->execute();
$exist = $statement->fetchAll(PDO::FETCH_ASSOC);
$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
array('label' => 'first_header', 'type' => 'string'),
array('label' => 'second_header', 'type' => 'number')
);
foreach($exist as $r) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['name']);
// Values of each slice
$temp[] = array('v' => (int) $r['counted']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
return $json = Json_encode($table,true);
和Ajax:
include './database.php';
$connection = new database();
$conn = $connection->connect_db();
$fetchedResult = $connection->select_heuristic_piechart1($conn);
header('Content-Type: application/json');
$json = json_encode($fetchedResult,true);
echo $json;
我不知道什么是错的,什么改变。有人能指出我正确的方向吗?
$ .ajax收到的JSON:
$.ajax({
url: "./db/receiver_and_transmitter.php",
data: 'GET',
dataType: 'json',
success: function(data){
console.log('Yas');
console.log(data);
var data = new google.visualization.DataTable(data);
},
error:function(data){
console.log('fail');
console.log(data);
}
});
答案 0 :(得分:0)
发布的JSON在PieChart
中正常工作,请参阅以下工作代码段。
如果这来自success
回调,则不应该出现问题。
loader.js
- 或 - jsapi
另外,load
语句在哪里以及您使用的是哪个版本?
google.charts.load('current', {
callback: function () {
var jsonData = '{"cols":[{"label":"first_header","type":"string"}, \
{"label":"second_header","type":"number"}],"rows":[{"c":[{"v":"cwood1r"}, \
{"v":5}]},{"c":[{"v":"sward2h"},{"v":2}]},{"c":[{"v":"etorres19"},{"v":2}]}, \
{"c":[{"v":"mfranklinr"},{"v":3}]},{"c":[{"v":"mspencerd"},{"v":21}]},{"c": \
[{"v":"jknight1y"},{"v":5}]},{"c":[{"v":"hhoward3"},{"v":4}]},{"c": \
[{"v":"pross6"},{"v":8}]},{"c":[{"v":"swagner7"},{"v":23}]},{"c": \
[{"v":"ajohnston1a"},{"v":8}]},{"c":[{"v":"dalexander1q"},{"v":2}]},{"c": \
[{"v":"rmendoza1u"},{"v":2}]},{"c":[{"v":"mmurphy1f"},{"v":5}]},{"c": \
[{"v":"rthomasp"},{"v":8}]},{"c":[{"v":"wsullivan5q"},{"v":1}]},{"c": \
[{"v":"bperkins3f"},{"v":3}]},{"c":[{"v":"csimpson1j"},{"v":4}]},{"c": \
[{"v":"mortiz2e"},{"v":10}]},{"c":[{"v":"sriley1h"},{"v":2}]},{"c": \
[{"v":"tbryantf"},{"v":10}]},{"c":[{"v":"esimmons15"},{"v":5}]},{"c": \
[{"v":"psullivan35"},{"v":2}]},{"c":[{"v":"jwatson9"},{"v":7}]},{"c": \
[{"v":"jcampbell1v"},{"v":2}]},{"c":[{"v":"rford14"},{"v":5}]},{"c": \
[{"v":"jnichols4m"},{"v":1}]},{"c":[{"v":"agreenm"},{"v":1}]},{"c": \
[{"v":"rmorris1"},{"v":4}]},{"c":[{"v":"pboyd16"},{"v":1}]},{"c": \
[{"v":"jdixon2"},{"v":12}]},{"c":[{"v":"kbrownv"},{"v":8}]},{"c": \
[{"v":"slarson2l"},{"v":2}]},{"c":[{"v":"lrileyn"},{"v":9}]},{"c": \
[{"v":"mholmes1t"},{"v":5}]},{"c":[{"v":"phill4"},{"v":5}]},{"c": \
[{"v":"pwalkerh"},{"v":2}]},{"c":[{"v":"thawkins1g"},{"v":6}]},{"c": \
[{"v":"crussell0"},{"v":27}]},{"c":[{"v":"cweaver3s"},{"v":2}]},{"c": \
[{"v":"fgonzalesb"},{"v":8}]},{"c":[{"v":"elopez10"},{"v":3}]},{"c": \
[{"v":"pnichols4f"},{"v":1}]},{"c":[{"v":"swallace1i"},{"v":4}]}]}';
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 300,
theme: 'maximized',
width: 300
});
},
packages: ['corechart']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;