README

渲染一个 ChartJs 插件 小部件

安装

安装此扩展的首选方式是通过 composer。这需要 composer-asset-plugin，它也是 yii2 的依赖项——因此如果您已经安装了 yii2，您可能已经设置好了。

运行以下命令之一：

composer require maxodrom/yii2-chartjs-widget:dev-master

或者将以下内容添加到您的应用程序 composer.json 文件的 require 部分中。

"maxodrom/yii2-chartjs-widget": "dev-master"

使用

用法

支持以下类型：

• 折线图
• 柱状图
• 雷达图
• 极坐标图
• 饼图
• 环形图
• 气泡图
• 散点图
• 面积图
• 混合图

以下示例使用的是 Line 类型的图表。请参阅 ChartJs 插件 文档了解插件支持的其它类型。

use dosamigos\chartjs\ChartJs;

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 400,
    ],
    'data' => [
        'labels' => ["January", "February", "March", "April", "May", "June", "July"],
        'datasets' => [
            [
                'label' => "My First dataset",
                'backgroundColor' => "rgba(179,181,198,0.2)",
                'borderColor' => "rgba(179,181,198,1)",
                'pointBackgroundColor' => "rgba(179,181,198,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(179,181,198,1)",
                'data' => [65, 59, 90, 81, 56, 55, 40],
            ],
            [
                'label' => "My Second dataset",
                'backgroundColor' => "rgba(255,99,132,0.2)",
                'borderColor' => "rgba(255,99,132,1)",
                'pointBackgroundColor' => "rgba(255,99,132,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(255,99,132,1)",
                'data' => [28, 48, 40, 19, 96, 27, 100],
            ],
        ],
    ],
]);
?>

插件用法示例（在饼图中显示百分比）

echo ChartJs::widget([
    'type' => 'pie',
    'id' => 'structurePie',
    'options' => [
        'height' => 200,
        'width' => 400,
    ],
    'data' => [
        'radius' =>  "90%",
        'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels
        'datasets' => [
            [
                'data' => ['35.6', '17.5', '46.9'], // Your dataset
                'label' => '',
                'backgroundColor' => [
                    '#ADC3FF',
                    '#FF9A9A',
                    'rgba(190, 124, 145, 0.8)'
                ],
                'borderColor' =>  [
                    '#fff',
                    '#fff',
                    '#fff'
                ],
                'borderWidth' => 1,
                'hoverBorderColor'=>["#999","#999","#999"],                
            ],
        ],
    ],
    'clientOptions' => [
        'legend' => [
            'display' => false,
            'position' => 'bottom',
            'labels' => [
                'fontSize' => 14,
                'fontColor' => "#425062",
            ],
        ],
        'tooltips' => [
            'enabled' => true,
            'intersect' => true,
        ],
        'hover' => [
            'mode' => false,
        ],
        'maintainAspectRatio' => false,
    ],
    'plugins' =>
        new \yii\web\JsExpression('
        [{
            afterDatasetsDraw: function(chart, easing) {
                var ctx = chart.ctx;
                chart.data.datasets.forEach(function (dataset, i) {
                    var meta = chart.getDatasetMeta(i);
                    if (!meta.hidden) {
                        meta.data.forEach(function(element, index) {
                            // Draw the text in black, with the specified font
                            ctx.fillStyle = 'rgb(0, 0, 0)';

                            var fontSize = 16;
                            var fontStyle = 'normal';
                            var fontFamily = 'Helvetica';
                            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                            // Just naively convert to string for now
                            var dataString = dataset.data[index].toString()+'%';

                            // Make sure alignment settings are correct
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';

                            var padding = 5;
                            var position = element.tooltipPosition();
                            ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                        });
                    }
                });
            }
        }]')
])

更多信息

ChartJs 有许多配置选项。有关更多信息，请访问 ChartJs 插件 网站。

贡献

请参阅 CONTRIBUTING 了解详情。

致谢

• Antonio Ramirez
• 所有贡献者

许可

BSD 许可证（BSD）。有关更多信息，请参阅 许可文件。

定制软件 | 网络与移动软件开发
www.2amigos.us