Google 饼图生成空白图表

Question

我正在使用以下 json 来生成我的饼图，但它生成了一个没有错误的空白图表。

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

$.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);
    });

post请求输出的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

Fiddle 重现问题： https://jsfiddle.net/thatmesg/1/

Answer 1

我有类似的 "issue" 但这不是问题。我所有的饼图切片都只返回 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 ([=11=].00)",0],["Harrassment ([=11=].00)",0],["Productivity ([=11=].00)",0],["Skills Gap ([=11=].00)",0],["Values Behaviour ([=11=].00)",0]]);

我还看到你的 JSON 包含 "keys"。您应该做类似的事情（删除键并仅将值传递给 JSON）：

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

Answer 2

问题出在我的值上...列 "Valor" 被定义为数字，但值是以字符串形式出现的 quotes...

刚刚从我的 JSON 中删除了引号并且有效

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

Updated fiddle

Google 饼图生成空白图表

Google Pie Chart generates blank chart

javascript

charts

json

google-visualization