Symfony2 - Высокие диаграммы, отображающие пустой div
Я только что установил пакет Highcharts на Symfony 2.7, но я уже столкнулся с проблемой при попытке воспроизвести "Пример использования" из документации (см. https://github.com/marcaube/ObHighchartsBundle/blob/master/Resources/doc/usage.md)
Вот мой код:
Контроллер
public function homepageAction()
{
$user = $this->getUser();
$securityContext = $this->get('security.context');
$authorization = $securityContext->isGranted('ROLE_REGISTERED_USER');
if ($authorization) {
// Charts Test
$ob = new Highchart();
$ob->chart->renderTo('piechart');
$ob->title->text('Browser market shares at a specific website in 2010');
$ob->plotOptions->pie(array(
'allowPointSelect' => true,
'cursor' => 'pointer',
'dataLabels' => array('enabled' => false),
'showInLegend' => true
));
$data = array(
array('Firefox', 45.0),
array('IE', 26.8),
array('Chrome', 12.8),
array('Safari', 8.5),
array('Opera', 6.2),
array('Others', 0.7),
);
$ob->series(array(array('type' => 'pie', 'name' => 'Browser share', 'data' => $data)));
return $this->render('MVPBundle:User:homepage.html.twig', array(
'user' => $user,
'chart' => $ob,
));
} else {
$url = $this->generateUrl('user_displayCompanyCreationForm');
return $this->redirect($url);
}
}
Просмотр
<script src='{{ asset('bundles/mvp/js/jquery-2.1.4.js') }}' type="text/javascript"></script>
<script src='{{ asset('bundles/mvp/js/highcharts.js') }}' type="text/javascript"></script>
<script src='{{ asset('bundles/mvp/js/exporting.js') }}' type="text/javascript"></script>
<script type="text/javascript">
{{ chart(chart) }}
</script>
<div id="piechart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
После некоторых исследований я понял, что это может быть связано с импортом файлов JS, поэтому я убедился, что пути чтобы файлы были в порядке, и этот Jquery был импортирован до файлов JS Highcharts, поэтому я действительно не понимаю, откуда берется проблема...:(
Я был бы признателен за любую помощь!:)
Приветствия,
2 answers
Вы ссылаетесь на неправильный html-идентификатор
$ob->chart->renderTo('piechart'); //This is looking for html element with id as piechart
<div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
Измените его на
$ob->chart->renderTo('linechart');
В случае, если это поможет:
Я только что исправил проблему. Это произошло из-за зависимости jQuery (не от порядка импорта, а от версии импортированного файла). Действительно, это не сработало с 2.1.4, в то время как это работает, например, с 1.7.1...:)