谷歌图表,AJAX,并使用样式/颜色



我遵循了各种例子...
当数据表输入来自服务器的
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'));,它奏效了。
我希望这对其他人有所帮助。

相关内容

  • 没有找到相关文章

最新更新