谷歌图表格式答案

【问题标题】：Google chart formatting谷歌图表格式
【发布时间】：2010-07-16 15:37:03
【问题描述】：

我有以下脚本需要稍作修改。这是json：

[
    {"User1":{"v": 50.00,"f": "£100"}},
    {"User2":{"v": 10.00,"f": "£20"}},
    {"User3":{"v": 10.00,"f": "£20"}},
    {"User4":{"v": 10.00,"f": "£20"}},
    {"User5":{"v": 20.00,"f": "£40"}}
]

这是脚本：

<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'chart_json.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'User');
        data.addColumn('number', 'v');
        data.addRows(json.length);
        for(var j in json) {
            for(var k in json[j]) {
                data.setValue(parseInt(j), 0, k);
                data.setValue(parseInt(j), 1, json[j][k].v);
            }
        }
        var chart = new google.visualization.PieChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Work In Progress'});
    }
</script>
</head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

这通过给我一个漂亮的饼图来工作，我如何从 JSON 数据中将“f”值也放入图表中？

【问题讨论】：

标签： jquery javascript google-visualization

【解决方案1】：

添加一个 f 列：

data.addColumn('number', 'v');
data.addColumn('number', 'f'); // <- new line

然后，将数据添加到行中：

for(var k in json[j]) {
    data.setValue(parseInt(j), 0, k);
    data.setValue(parseInt(j), 1, json[j][k].v);
    data.setValue(parseInt(j), 2, parseInt(json[j][k].f.substring(1))); // <- new line
}

但是，我不知道饼图是如何处理的。

【讨论】：

啊 - 因为数据不是数字（因为磅符号）。您可以将其设为数字（服务器端或客户端），或将 f 列的数据类型从“数字”更改为“字符串”。
我更新了我的答案以显示如何插入保持“数字”数据类型的数据。它只是切掉第一个字符（井号），然后将字符串解析为 int。
效果几乎完美！但是，一旦创建图表，也只需要显示“£”符号。这可能吗？
看起来我不需要json数据中的百分比，谷歌图表能够根据£值自动计算出百分比！但仍需要以某种方式显示 £ 符号。
addColumn('number', 'v') 中的 'v' 是列名 - 因此在其中添加一个井号可能会有所帮助。