当数据表输入来自服务器的JSON数据时，更改Google图表栏颜色 [英] Change Google Chart bar colors when data table input is from JSON data from server
本文介绍了当数据表输入来自服务器的JSON数据时，更改Google图表栏颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
然而，我想知道如何才能从默认的蓝色更改条形颜色。我很困惑应该如何使用 {role：'style'} 函数。
这是我的代码：
<？php
$ con = mysql_connect（localhost，username，pass）或死亡（无法连接数据库）;
mysql_select_db（rosac，$ con）;
$ query = mysql_query（
SELECT TarikhLulusTahun AS Tahun，COUNT（*）AS Jumlah
FROM association
GROUP BY TarikhLulusTahun）;
$ rows = array（）;
$ table = array（）;
$ table ['cols'] = array（
array（'label'=>'Tahun'，'type'=>'string'），
array （'label'=>'Jumlah Persatuan'，'type'=>'number'）
（{type：'string'，role：'style'}）
） ;
$ rows = array（）;
while（$ r = mysql_fetch_assoc（$ query））{
$ temp = array（）;
$ temp [] = array（'v'=>（string）$ r ['Tahun']）;
$ temp [] = array（'v'=>（int）$ r ['Jumlah']）;
$ rows [] = array（'c'=> $ temp）;
}
$表['rows'] = $ rows;
$ jsonTable = json_encode（$ table）;
// echo $ jsonTable;
？>
< html>
< head>
<！ - 加载Ajax API - >
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script>
< script type =text / javascript>
//加载可视化API和饼图包。
google.load（'visualization'，'1'，{'packages'：['corechart']}）;
//设置回调以在加载Google Visualization API时运行。
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
//从服务器加载的JSON数据中创建我们的数据表。
var data = new google.visualization.DataTable（<？= $ jsonTable？>）;
var options = {
title：'Jumlah Persatuan Berdaftar Mengikut Tahun'，
is3D：'true'，
width：1000，
height：1000，
hAxis：{title：'Tahun'，titleTextStyle：{color：'red'}}，
vAxis：{title：'Jumlah Persatuan'，titleTextStyle：{color：'blue'}}
};
var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））;
chart.draw（data，options）;
}
< / script>
< / head>
< body>
<！ - 这是容纳饼图的div - >
< div id =chart_div>< / div>
< / body>
< / html>
解决方案
您需要做一些事情。首先，你的专栏创作是错误的;这：
$ table ['cols'] = array（
array（'label'=>'Tahun '，'type'=>'string'），
array（'label'=>'Jumlah Persatuan'，'type'=>'number'）
（{type：'string '，角色：'style'}）
）;
应该是这样的：
<$ p $ $ b $ array（'label'=>'Tahun'，'type'=>'string'），
array（'code> $ table ['cols'] = array （'label'=>'Jumlah Persatuan'，'type'=>'number'），
array（'type'=>'string'，'p'=> array（'role' =>'style'））
）;
然后，当您创建数据行时，您需要为该样式添加一个单元格：
while（$ r = mysql_fetch_assoc（$ query））{
$ temp = array（）;
$ temp [] = array（'v'=>（string）$ r ['Tahun']）;
$ temp [] = array（'v'=>（int）$ r ['Jumlah']）;
$ temp [] = array（'v'=>< insert style here>）;
$ rows [] = array（'c'=> $ temp）;
}
I have been struggling with google chart API. And I found this brilliant example on SO PHP MySQL Google Chart JSON - Complete Example .
However I was wondering how could I change the bar color from the dafault blue color. I am confused on how should I use the { role: 'style' } function.
Here is my code :
<?php
$con=mysql_connect("localhost","username","pass") or die("Failed to connect with database");
mysql_select_db("rosac", $con);
$query = mysql_query("
SELECT TarikhLulusTahun AS Tahun, COUNT(*) AS Jumlah
FROM association
GROUP BY TarikhLulusTahun");
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Tahun', 'type' => 'string'),
array('label' => 'Jumlah Persatuan', 'type' => 'number')
({type: 'string', role: 'style'})
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
$temp[] = array('v' => (string) $r['Tahun']);
$temp[] = array('v' => (int) $r['Jumlah']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Jumlah Persatuan Berdaftar Mengikut Tahun',
is3D: 'true',
width: 1000,
height: 1000,
hAxis: {title: 'Tahun', titleTextStyle: {color: 'red'}},
vAxis: {title: 'Jumlah Persatuan', titleTextStyle: {color: 'blue'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
解决方案
You need to do a couple of things. First, your column creation is wrong; this:
$table['cols'] = array(
array('label' => 'Tahun', 'type' => 'string'),
array('label' => 'Jumlah Persatuan', 'type' => 'number')
({type: 'string', role: 'style'})
);
should be like this:
$table['cols'] = array(
array('label' => 'Tahun', 'type' => 'string'),
array('label' => 'Jumlah Persatuan', 'type' => 'number'),
array('type' => 'string', 'p' => array('role' => 'style'))
);
Then, when you are creating the rows of data, you need to add a cell for the style:
while($r = mysql_fetch_assoc($query)) {
$temp = array();
$temp[] = array('v' => (string) $r['Tahun']);
$temp[] = array('v' => (int) $r['Jumlah']);
$temp[] = array('v' => <insert style here>);
$rows[] = array('c' => $temp);
}
这篇关于当数据表输入来自服务器的JSON数据时，更改Google图表栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
