谷歌饼图生成空白图表答案

【问题标题】：Google Pie Chart generates blank chart谷歌饼图生成空白图表
【发布时间】：2015-08-09 23:24:27
【问题描述】：

我正在使用以下 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);
    });

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

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

【问题讨论】：

你检查控制台了吗？
是的，没有抛出错误

标签： javascript json charts google-visualization

【解决方案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));

【讨论】：

和以前一样。我为这个问题创造了一个小提琴。我认为我的 json 有问题。检查我创建的小提琴：jsfiddle.net/thatmesg/1
我正在使用PHP生成，并且使用了json_encode。你说的是哪个支架？我用过jsonformatter，它说我的 JSON 是有效的
你能解释一下“错误类型的括号”是什么意思
您的 dados 变量包含大括号，这是错误的。始终通过查看官方来源开始解决您的问题：developers.google.com/chart/interactive/docs/gallery/piechart。看看那里的一些例子。数据 (datos) 变量应仅使用方括号构建，并且 JSON 的结构也必须匹配。首先满足所有条件，然后我们可以进行调查。 :)
但是从您的来源来看，DataTable 是由 javascript 数组生成的。我想从我的服务器接收数据，为此我需要通过 JSON 发送它。查看这个谷歌图表documentation

【解决方案2】：

问题出在我的价值观上...“Valor”列被定义为数字，但值以带有引号的字符串形式出现...

刚刚从我的 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

【讨论】：