ChartJS 如何制作Yii2图表

5tmbdcev  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(164)

我正在使用2amigos/yii2-chartjs-widget来绘制图表,除了图表方向之外,一切都正常,我想让它水平。如下所示:

我的代码是:

<?=ChartJs::widget([
                    'type' => 'bar',
                    'id'=> 'agent'.$index,
                    'options' => [
                        'indexAxis'=> 'y',
                        'responsive'=> true,
                        'height' => 200,
                        'width' => 400
                    ],
                    'data' => [
                        'radius' =>  "90%",
                        'labels' => array_keys($productschart),
                        'datasets' => [
                            [
                                'data' =>array_values($productschart),
                                'label' => '',
                                'backgroundColor' => Charts::Colors(count($productschart)),
                                'borderColor' =>  [
                                    '#fff',
                                    '#fff',
                                    '#fff'
                                ],
                                'borderWidth' => 1,
                                'hoverBorderColor'=>["#999","#999","#999"],
                            ]
                        ]
                    ],
                ]);
                ?>

即使添加了'indexAxis' =〉'y',图表仍然是垂直的,如下所示:

isr3a4wc

isr3a4wc1#

解决方案是使用'type' =〉'horizontalBar'而不是'type' =〉'bar'

相关问题