我遵循了各种例子...
当数据表输入来自服务器的
JSON 数据时,更改 Google 图表条形颜色...而且我很肯定我的数据格式正确。它正在加载 AJAX,代码如下。
AJAX PHP
$rets = ret_priced_product();
$i=1;
$cols = array();
$rows = array();
$col{$i}=array();
$col{$i}["label"]="Retailer";
$col{$i}["type"]="string";
$cols[] = $col{$i++};
$col{$i}=array();
$col{$i}["label"]="Cheapest";
$col{$i}["type"]="number";
$cols[] = $col{$i++};
$col{$i}=array();
$col{$i}["type"] = "string";
$col{$i}["p"] = array("role" => "style");
$cols[] = $col{$i++};
$k = 0;
foreach($rets as $ret) {
$rowno = "row" . $k;
${$rowno}["c"] = array();
$cell0["v"]= $ret->ret; //the first cell is always the title
${$rowno}["c"][] = $cell0;
$cell1["v"]= $ret->cnt;
${$rowno}["c"][] = $cell1;
$cell2["v"]= "color: " . $ret->colour;
${$rowno}["c"][] = $cell2;
$rows[] = ${$rowno};
}
$data = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($data);
创建的 JSON 如下所示...
{
"cols":[
{
"id":"",
"label":"Retailer",
"pattern":"",
"type":"string"
},
{
"id":"",
"label":"Cheapest",
"pattern":"",
"type":"number"
},
{
"type":"string",
"p":{
"role":"style"
}
}
],
"rows":[
{
"c":[
{
"v":"Ret1"
},
{
"v":"6"
},
{
"v":"color: #FF9900"
}
]
},
{
"c":[
{
"v":"Ret2"
},
{
"v":"34"
},
{
"v":"color: #F03A40"
}
]
},
{
"c":[
{
"v":"Ret3"
},
{
"v":"60"
},
{
"v":"color: #0043F0"
}
]
}
]
}
爪哇语
function drawChart2() {
$.ajax({
url: '../ajax/gc_position_ret_min.php',
beforeSend: function(){
$("#chart2").html('<img src="/img/loading.gif">');
},
type: 'post',
data: {
cat: cat,
},
dataType: 'json'
}).done(function(data){
console.log(data);
jsonData = data;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: "Retailer with the lowest priced product",
};
var chart = new google.charts.Bar(document.getElementById('chart2'));
chart.draw(data, options);
}).fail(function(){
//
});//AJAX
}
因此,无论发生什么情况,数据都会正确出现,但样式会被忽略。如果我在 PHP 中对样式进行硬编码,它没有任何效果。
所以我的问题是...当我通过 AJAX 从源获取数据时,如何获得不同的条形颜色,哪个部分不起作用?
因此,经过几个小时的扯头发,我有一个想法,也许我应该使用visualization
而不是谷歌大力推荐的新。所以我把var chart = new google.charts.Bar(document.getElementById('chart2'));
改成了var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
,它奏效了。
我希望这对其他人有所帮助。