Google饼图生成空白图表

时间:2015-08-09 23:24:27

标签: javascript json charts google-visualization

我使用以下json生成我的PieChart,但它会生成一个没有错误的空白图表。

以下块是我生成图表的代码:

$.post('/admin/relatorios/getVendasCidadeChart', {
        dt_inicio: $("#datepicker-from").val(),
        dt_fim: $("#datepicker-to").val()
    }).done(function(donutData){
        var dados = new google.visualization.DataTable(donutData);
        var options = {
            title: "Vendas por Cidade",
            width: "100%",
            height: "100%",
        };
        var chart = new google.visualization.PieChart(document.getElementById('vendas-cidade'));
        chart.draw(dados, options);
    });

帖子请求的json输出:

{"cols":[{"id":"","label":"Loja","type":"string"},{"id":"","label":"Valor(R$)","type":"number"}],"rows":[{"c":[{"v":"Loja Shopping"},{"v":"8620.00"}]},{"c":[{"v":"Loja Centro"},{"v":"10240.00"}]}]}

生成的图表:  http://i.stack.imgur.com/Dfhe4.png

更新1

小提琴再现问题: https://jsfiddle.net/thatmesg/1/

2 个答案:

答案 0 :(得分:1)

我有类似的"问题"但这不是一个问题。我所有的馅饼切片都只是返回0,这可能会发生,而且它在逻辑上是正确的。

sliceVisibilityThreshold: 0添加到您的options变量中。即使没有数据,它也应该显示图例。如果您看到图例,那么我们可以假设Google图表库按预期工作。如果不是......那么我们将进一步调查。

var options = {
    legend: { position: 'top', maxLines: 6 },
    sliceVisibilityThreshold: 0
};

编辑:

我发现您使用了错误类型的括号:

这就是你的JSON应该是什么样子。如果您使用PHP生成它,请不要忘记使用json_encode

var data = google.visualization.arrayToDataTable([["Category","Hours"],["Compliance \/ Policy ($0.00)",0],["Harrassment ($0.00)",0],["Productivity ($0.00)",0],["Skills Gap ($0.00)",0],["Values Behaviour ($0.00)",0]]);

我也看到你的JSON包含"键"。您应该执行类似操作(删除键并仅将值传递给JSON):

$final['json'] = json_encode(array_values($pie_hours));

答案 1 :(得分:0)

问题在于我的价值......“Valor”列被定义为数字,但是这些值是以引号 ...

的字符串形式出现的

刚刚从我的JSON中删除了引号,它就可以了

var json = @"[{'symbol':'@CL.1','symbolType':'symbol','code':0,'name':'WTI Crude Oil (Sep\u002715)','shortName':'OIL','last':'42.10','exchange':'New York Mercantile Exchange','source':'','open'
                  :'42.23','high':'42.26','low':'41.35','change':'-0.13','currencyCode':'USD','timeZone':'EDT','volume':'7832','provider':'CNBC Quote Cache','altSymbol':'CL/U5','curmktstatus':'REG_M
                  KT','realTime':'false','assetType':'DERIVATIVE','noStreaming':'false','encodedSymbol':' % 40CL.1'}]";
var dynObj = JsonConvert.DeserializeObject<List<Foo>>(json);    
foreach (var data in dynObj)
{
    Console.WriteLine(data.AltSymbol);
    Console.WriteLine(data.AssetType);
    Console.WriteLine(data.Change);
    Console.WriteLine(data.Code);
    //... and more ...
}
Console.ReadKey();

Updated fiddle