Chart.js -在一个页面上创建多个图表

cmssoen2 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(290)

我想在我的joomla组件“bestia”中使用chart.js。为此，我导入了chart.js作为manifest.xml中的media-element。
我通过执行以下操作来调用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-Graphs，这个图就可以正确地呈现：

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

但是，如果我想在页面中添加第二个图形，则不再显示第一个图形：

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

我能怎么办呢？

chart.js

来源：https://stackoverflow.com/questions/24757569/chart-js-creating-multiple-charts-on-one-page

1条答案

按热度按时间

kt06eoxx1#

您正在重新声明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 }); 

}

你可以做些什么来解决这个问题。我建议将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); ?>

在底部的某个地方你必须调用new function：

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

赞(0）回复(0）举报 2022-11-09

我来回答

Chart.js -在一个页面上创建多个图表

1条答案

相关问题

热门标签

最新问答