我想使用ObHighchartsBundle创建多轴绘图来创建图像中的图表
(我试图关注https://github.com/efraxpc/sogar/tree/master/vendor/ob/highcharts-bundle/Ob/HighchartsBundle)
该图表是在过去4年中给出的,为什么我使用createQueryBuilder提取属于过去4年的数据,然后我应该将4年和变量传递给mychart函数。
更新: yAxis => 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 %}