Chart.js - Erstellen mehrerer Diagramme auf einer Seite

Möchte ich nutzen, chart.js in meiner joomla-Komponente namens "bestia".
Zu tun, so dass ich importiert chart.js als media-element in der manifest.xml.

Ich rufe die js wie folgt:

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

Nun würde ich gerne auf einen Helfer zu verkürzen, die Dinge ein wenig. Mein Helfer sollte ein Diagramm zeichnen...

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;
    }
}

Gut, wenn ich den Anruf dieser Jhtml-Graphen, der graph ist korrekt wiedergegeben:

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

Aber wenn ich will, um eine zweite Grafik für meine Seite die erste Grafik wird nicht mehr angezeigt:

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

Was kann ich tun?

  • Jede Konsole Fehler?
  • Nein 🙁 Es gibt keine Fehler in der Konsole...
InformationsquelleAutor user3755325 | 2014-07-15
  1. 2

    Sind Sie redeclaring window.onload Funktion. Das ist der Grund, warum Sie zeichnen nur einen (letzten) Diagramm.

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

}

    Was Sie tun können, um das zu beheben. Im Vorschlag zur änderung JHtmlGraphs Klasse wie folgt:

        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;
    }
}

    Ich veränderte Ihre Skripte. Jetzt ist Ihre onload Funktion generiert wird, eine Zeit, aus finishDrawing Methode:

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

    Und irgendwo an der Unterseite, müssen Sie rufen Sie die neue Funktion:

    <?php echo JHtml::finishDrawing(); //you better know than me how to call this function?>
    • Danke für deine Antwort. Leider bin ich nicht diese Art von javascript-Experten... Wie kann ich das beheben? Wie kann ich meine Helfer zum zeichnen von mehreren Diagramme ohne redeclaring Fenster.onload ?
    • ich aktualisiert meine Antwort. Ich hoffe es gibt keine Fehler, nicht getestet.
    InformationsquelleAutor Kasyx
Schreibe einen Kommentar