Chart.js - Создание нескольких диаграмм на одной странице

Question

Я хотел бы использовать chart.js в моем компоненте joomla под названием «bestia». Для этого я импортировал chart.js в качестве медиа-элемента в manifest.xml.

Я звоню в JS, выполнив следующие действия:

JHtml::script(Juri::root() . 'media/com_hostinghelden/chartjs/Chart.js');

Теперь я хотел бы использовать помощник, чтобы сократить вещи немного. Мой помощник должен нарисовать график ...

abstract class JHtmlGraphs 
{ 
    public function draw($title = NULL, $labelset = NULL, $data = NULL, $data2 = NULL) 
    { 
     $script = "<script> var barChartData_$title = { labels : [ {$labelset} ], datasets : [ { fillColor : 'rgba(220,220,220,0.5)', strokeColor : 'rgba(220,220,220,0.8)', highlightFill: 'rgba(220,220,220,0.75)', highlightStroke: 'rgba(220,220,220,1)', data : [ $data ] }, { fillColor : 'rgba(151,187,205,0.5)', strokeColor : 'rgba(151,187,205,0.8)', highlightFill : 'rgba(151,187,205,0.75)', highlightStroke : 'rgba(151,187,205,1)', data : [ $data2 ] } ] }; window.onload = function(){ var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true }); } </script>"; 
     $canvas = "<div style='width: 100%'><canvas id='canvas_$title' height='20' width='20'></canvas></div>"; 
     return $script . $canvas; 
    } 
} 

Ну, если я называю это JHTML-Графы, граф оказывается правильно:

<?php echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2); ?> 

Но если я хочу, чтобы добавить второй граф к моему страница, первый график больше не показан:

<?php echo JHtml::_('graphs.draw', "Titel2", $labelset, $data, $data2); ?> 

Что я могу сделать?

Answer 1

Вы обновляете код window.onload Функция. Вот почему вы рисуете только одну (последнюю) диаграмму.

window.onload = function(){ 
    var ctx_$title = document.getElementById('canvas_$title').getContext('2d');          
    window.myBar = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true }); 

} 

Что вы можете сделать, чтобы исправить это. Im предлагает изменить JHtmlGraphs класс следующим образом:

abstract class JHtmlGraphs 
{ 
    private $titles = array(); 

    public function draw($title = NULL, $labelset = NULL, $data = NULL, $data2 = NULL) 
    { 
     $script = "<script> var barChartData_$title = { labels : [ {$labelset} ], datasets : [ { fillColor : 'rgba(220,220,220,0.5)', strokeColor : 'rgba(220,220,220,0.8)', highlightFill: 'rgba(220,220,220,0.75)', highlightStroke: 'rgba(220,220,220,1)', data : [ $data ] }, { fillColor : 'rgba(151,187,205,0.5)', strokeColor : 'rgba(151,187,205,0.8)', highlightFill : 'rgba(151,187,205,0.75)', highlightStroke : 'rgba(151,187,205,1)', data : [ $data2 ] } ] };</script>"; 
     $canvas = "<div style='width: 100%'><canvas id='canvas_$title' height='20' width='20'></canvas></div>"; 

     $this->titles[] = $title; //storing titles 
     return $script . $canvas; 
    } 

    public function finishDrawing() { 
     $launchCharts = ''; 
     foreach($this->titles as $title) { 
      $launchCharts .= "var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar_$title = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true });"; 
     } 
     $this->titles = array(); 

     $script = "<script>window.onload = function(){ $launchCharts }</script>"; 
     return $script; 
    } 
} 

Я изменил свои сценарии. Теперь ваша onload функция будет генерироваться один раз, из finishDrawing метода:

<?php echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2); ?> 
<?php echo JHtml::_('graphs.draw', "Titel2", $labelset, $data, $data2); ?> 

И где-то на дне вы должны вызвать новую функцию:

<?php echo JHtml::finishDrawing(); //you better know than me how to call this function?>