README

支持 chart.js 2.0 的 Yii2 图表小部件。

安装

要在您的应用程序中安装小部件，请运行

composer require enscope/yii2-chartjs-widget:~1.0

或添加

"enscope/yii2-chartjs-widget" : "~1.0"

到您应用程序的 composer.json 文件的 require 部分。

可以直接使用源代码，但为了您的利益，建议使用 composer。

基本用法

小部件的主类是 ChartJsWidget，您只需要在视图中使用它。基本配置如下

{ChartJsWidget::widget([
    'chartType' => ChartJsWidget::CHART_LINE,
    'canvasOptions' => [
        'height' => 200
    ],
    'chartOptions' => [
        'animation' => false,
        'bezierCurve' => false,
        'maintainAspectRatio' => false,
        'responsive' => true,
        'tooltips' => [
            'callbacks' => [
                'label' => ChartJsWidget::js('function (item) { return (item.yLabel + "%"); }')
            ]
        ]
    ],
    'chartData' => $chartData
])}

所有支持的图表类型都定义为常量

const CHART_LINE = 'line';
const CHART_BAR = 'bar';
const CHART_RADAR = 'radar';
const CHART_POLAR_AREA = 'polarArea';
const CHART_PIE = 'pie';
const CHART_DOUGHNUT = 'doughnut';

要将在配置中包含的 JavaScript 回调，可以使用 ChartJsWidget::js(..) 助手，允许用户即使使用 Smarty 作为应用程序的模板引擎（如本例所示）也能简单地实例化表达式。该助手简单地使用指定的字符串实例化 yii\web\JsExpression。

小部件的属性如下

• $id 是用户可定义的 HTML5 Canvas 标识符，但可以留空，在这种情况下将自动生成
• $canvasOptions 是直接注入到 <canvas> 标签中的 HTML 属性
• $chartType 是 chart.js 库支持的上述图表类型之一（如果有些新的图表类型而小部件落后了，您始终可以自由地使用字符串作为图表类型名称，但建议使用常量）
• $chartData 是图表的数据，直接设置为 Chart() 配置中的 data 键
• $chartOptions 是图表的配置 options

计划增强

• 支持全局图表默认值
• 为简化实例化提供特定于图表的数据和选项类

致谢

此小部件受到 2amigOS! ChartJs 小部件 的启发，不幸的是，它不适用于 chart.js 2.0，因此我决定创建一个新版本，并在基本结构方面借用了一些灵感。