Symfony3 Highcharts 饼图空白

Question

我今天在 symfony3 项目中开始使用 Highcharts，折线图效果很好。我在渲染饼图时遇到问题，我正在用头撞墙试图找出它不起作用的原因。

我可以重现基本饼图（如 this one) if I render directly in javascript in my twig template, and it looks as expected. BUT if I try to render from my controller I get a blank image where the pie chart should be. My chart title is there so I know I'm rendering to the correct div. But the chart is blank. I've even tried very simple data structures (like an array of numbers as suggested by the docs），但运气不好。这一定很简单。求助！

我的控制器：

public function piechartAction()
{
    $data = [["name"=> 'Microsoft Internet Explorer', "y"=> 56.33],
        ["name"=> 'Chrome', "data"=> 24.03],
        ["name"=> 'Firefox', "y"=> 10.38],
        ["name"=> 'Safari', "y"=> 4.77],
        ["name"=> 'Opera', "y"=> 0.91],
        ["name"=> 'Proprietary or Undetectable', "y"=> 0.2]];

    $ob = new Highchart();
    $ob->chart->renderTo('container');
    $ob->chart->type('pie');
    $ob->title->text('My Pie Chart');
    $ob->series(array("data"=>$data));

    return $this->render('dashboard/test.html.twig', [
        'mypiechart' => $ob
    ]);
}

还有我的 twig 模板：

{% extends 'base.html.twig' %}

{% block javascripts %}
    {{ parent() }}

    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
    <script>
        jQuery(document).ready(function() {
            {{ chart(mypiechart) }}
        });
    </script>
{% endblock %}

{% block body %}
    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
{% endblock %}

Answer 1

我解决了这个问题。对于展望未来的任何人，这就是我的错误：我的系列数据设置格式不正确。

这是我的新（工作）控制器：

public function piechartAction()
{
    $data = [
        ['Microsoft Internet Explorer', 56.33],
        ['Chrome', 24.03],
        ['Firefox', 10.38],
        ['Safari', 4.77],
        ['Opera', 0.91],
        ['Proprietary or Undetectable', 0.2]
    ];

    $ob = new Highchart();
    $ob->chart->renderTo('container');
    $ob->chart->type('pie');
    $ob->title->text('My Pie Chart');
    $ob->series(array(array("data"=>$data)));

    return $this->render('dashboard/test.html.twig', [
        'mypiechart' => $ob
    ]);
}

我通过研究与此捆绑包关联的 "cookbook" 发现了这一点 (here)；有一个向下钻取饼图列表。

Symfony3 Highcharts 饼图空白

Symfony3 Highcharts pie chart blank

highcharts

symfony

pie-chart