javascript - Google 饼图生成空白图表

Question

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

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

$.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"}]}]}

生成的图表: /image/Dfhe4.png

更新1

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

Answer 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));