代码之家 › 专栏 › 技术社区 › oshirowanen

谷歌图表格式

google-visualization javascript jquery

oshirowanen · 技术社区 · 14 年前

我有下面的脚本,我需要修改一点。以下是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>

这是通过给我一个漂亮的piechart来实现的,如何从JSON数据将“f”值也输入到图表中呢?

1 回复 | 直到 14 年前

sje397 14 年前

添加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
}

推荐文章

cmill · Google Visualization第1行不显示。使用时使用ColorFormat()。setProperty()

7 年前

Paul Chris Jones · 在google中包含字符串列。可视化。数据组

7 年前

yash041 · google charts图形设置图例值和相同颜色列

7 年前

I am the Most Stupid Person · 谷歌图表图例位置顶部不工作

7 年前

coolhand · 通过ASP循环。使用Google图表时的NET模型数据

7 年前

ndd · Google ChartWrapper不适用于直方图

7 年前

Nabeel · 显示一些点的Google散点图工具提示

7 年前

fab · Google Charts API:在折线图中显示数据点值

7 年前

StefanN · Google散点图复制相同的域(x轴)值

7 年前

Babasaheb Dhodad Nicholas J. Markkula · 如何将导出csv选项设置为google可视化饼图中的按钮

7 年前