Question

我想使用ObHighchartsBundle创建多轴绘图来创建图像中的图表

（我试图关注https://github.com/efraxpc/sogar/tree/master/vendor/ob/highcharts-bundle/Ob/HighchartsBundle）

该图表是在过去4年中给出的，为什么我使用createQueryBuilder提取属于过去4年的数据，然后我应该将4年和变量传递给mychart函数。

更新： yAxis =＆gt; 1中的问题，当我添加它时没有任何显示，当我删除它时，我得到的（只有一个轴）

我做了什么：

public function indexAction(Survey $ survey)
{
    $chart=new ChartController();
    $center = $ survey ->getCenter ();

$year = $survey->getYear();
$qb = $this->getDoctrine()->getManager()->createQueryBuilder();
$qb->select('e')
    ->from('AppBundle:survey', 's')
    ->where('s.year <= :year')
    ->andWhere('s.center = :center')
    ->setParameter('year', $year)
    ->setParameter('center', $center->getId())
    ->orderBy('s.year', 'DESC')
    ->setMaxResults(4);

$survey_year =  $qb->getQuery()->getResult();

$date = array();
$data1  = array();
$data2  = array();
$data3  = array();
$data4  = array();

$ survey_year = array_reverse($survey_year, true);

foreach(($survey_year as $es){
    $date[] =  $es ->getyear();
    $data1[] = $es ->getForm()->getBudget();
    $data2[] = $es ->getForm()->getRessources();
    $data3[] = $es ->getForm()->getTauxGlobal();
    $data4[] = $es ->getForm()->getTauxConsumption();
} 

$list1= array(
    "name" => "Budget",
    "type"  => "column",
    "color" => "#4572A7",
    "yAxis" => "1",
     "data" => $data1

);
$list2 =  array(
    "name" => "Ressource ",
    "type"  => "column",
    "color" => "#4572A7",
     "yAxis"=> "1",          //the problem in the yAxis=1 
    "data" => $data2
);

$list3= array(
    "name" => "Taux global",
    "type"  => "spline",
    "color" => "#0A0F19",
    "data" => $data3
);
$list4 =  array(
    "name" => "Taux Consumption",
    "type" => "spline",
     "color' => '#225824",
    "data" => $data4
);

$containermultiaxe=$chart->multiAxeChart($date,$list1, $list2,$list3,$list4);

$html =  $this->render('AppBundle:Chart:index.html.twig',array(
    survey' =>$surv,

    'containerMultiaxe' => $containermultiaxe,


));


return $html;
}

我的ChartController：

public function multiAxeChart($date, $list1, $list2,$list3,$list4)
{
    $dates = $date;
    $categories = array($dates);

    $ob = new Highchart();
    $ob->chart->renderTo('containerMultiaxe'); // The #id of the div where to render the chart
    $ob->chart->type('column');
    $ob->title->text('Budget');
    $ob->xAxis->categories($categories);

    $ob->legend->enabled(true);


  $dataSeries= array(
        $list1,
        $list2,
        $list3,
        $list4,

    );

    $yData = array(
        array(
            'labels' => array(
                'formatter' => new Expr('function () { return this.value + " %" }'),
                'style'     => array('color' => '#AA4643')
            ),

            'title' => array(
                'text'  => 'Taux',
                'style' => array('color' => '#AA4643')
            ),
            'opposite' => true,
        ),
        array(
            'labels' => array(
                'formatter' => new Expr('function () { return this.value + " mDT" }'),
                'style'     => array('color' => '#4572A7')
            ),
            'gridLineWidth' => 0,
            'title' => array(
                'text'  => 'Budget',
                'style' => array('color' => '#4572A7')
            ),
        ),
    );

    $ob->yAxis($yData);
    $formatter = new Expr('function () {
             var unit = {
                 "Budget ": "mDT",
                  "Ressources ": "mDT",
                 "Taux global": "%",
                 "Taux Consumption": "%"
             }[this.series.name];
             return this.x + ": <b>" + this.y + "</b> " + unit;
         }');
    $ob->tooltip->formatter($formatter);

    $ob->series( $dataSeries);
    return $ob;

}

index.html.twig：

<div style="display: inline">
    <div id="containerMultiaxe"></div>
</div>

{% block js %}
<script type="text/javascript">

{{ chart(containerMultiaxe) }}
</script>
{% endblock %}

使用useObHighchartsBundle创建多轴绘图

0 个答案: