README

Yii2中chart js的包装器。轻松将Yii2查询转换为漂亮的图表。

安装

首选方式是使用composer。

composer require practically/yii2-chartjs

注意：此软件包不处理chart js库的安装。有关信息，请访问chart js网站

您还可以使用asset packagist进行安装

composer require bower-asset/chart-js

Chart JS版本

请注意，在chart js配置的clientOptions中，版本2和3之间存在API变化。我们已经在文档的相关部分记录了此库的基本API。如果您正在更新到v3，可以在Chart JS 3.x迁移指南中找到更多信息

根据您在应用程序中实现的方式，您导入Chat JS JavaScript的方式可能会有所不同。您可以在Chart JS文档上了解更多关于集成的信息

用法

基本用法

use practically\chartjs\Chart;

echo Chart::widget([
    'type' => Chart::TYPE_BAR,
    'datasets' => [
        [
            'data' => [
                'Label 1' => 10,
                'Label 2' => 20,
                'Label 3' => 30
            ]
        ]
    ]
]);

使用数据库查询定义数据

echo Chart::widget([
    'type' => Chart::TYPE_BAR,
    'datasets' => [
        [
            'query' => Model::find()
                ->select('type')
                ->addSelect('count(*) as data')
                ->groupBy('type')
                ->createCommand(),
            'labelAttribute' => 'type'
        ]
    ]
]);

使用数据库查询和散点图

echo Chart::widget([
    'type' => Chart::TYPE_SCATTER,
    'datasets' => [
        [
            'query' => Model::find()
                ->select('type')
                ->addSelect('sum(column_one) as x')
                ->addSelect('sum(column_two) as y')
                ->groupBy('type')
                ->createCommand(),
            'labelAttribute' => 'type'
        ]
    ]
]);

添加DOM选项

echo Chart::widget([
    ...

    'options' => [
        'class' => 'chart',
        'data-attribute' => 'my-value'
    ],

    ...
]);

添加客户端选项

在客户端选项数组中，您可以定义任何要json编码并传递给chart js构造函数的属性。

echo Chart::widget([
    ...

    'clientOptions' => [
        'title' => [
            'display' => true,
            'text' => 'My New Title',
        ],
        'legend' => ['display' => false],
    ]

    ...
]);

格式化y轴

Chart JS v2.x

echo Chart::widget([
    ...

     'clientOptions' => [
        'scales' => [
            'yAxes' => [
                [
                    'ticks' => [
						'min' => 0,
						'max' => 100,
						'callback' => new JsExpression('function(value, index, values) {
                             return \'£\'+value;
                        }')
                    ],
					'scaleLabel' => [
						'display' => true,
						'labelString' => 'Average (%)',
					]
				]
			]
        ],
        'tooltips' => [
            'callbacks' => [
                'label' => new JsExpression('function(tooltipItem, chart) {
                    var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || \'\';
                    return datasetLabel + \' £\'+tooltipItem.yLabel;
                }')
            ]
        ]
    ]

    ...
]);

Chart JS v3.x

echo Chart::widget([
    ...

     'clientOptions' => [
        'scales' => [
            'y' => [
				'min' => 0,
				'max' => 100,
				'title' => [
					'display' => true,
					'text' => 'Average (%)',
				],
				'ticks' => [
					'callback' => new JsExpression('function(value, index, values) {
							return \'£\'+value;
					}')
				]
            ]
        ],
		'plugins' => [
			'tooltip' => [
				'callbacks' => [
					'label' => new JsExpression('function(context) {
						return \'£\'+context.chart.data.labels[context.dataIndex];
					}')
				]
			]
		]
    ]

    ...
]);

添加chart js事件

Chart::widget([
    'type' => Chart::TYPE_DOUGHNUT,
    'jsVar' => 'DoughnutChart',
    'jsEvents' => [
        'onclick' => new JsExpression('function(e) {
            var el = DoughnutChart.getElementAtEvent(e);
            window.location.href = "/search/ + el[0]._model.label;
        }')
    ]
]);

贡献

设置

克隆存储库并运行composer install。然后开始修改！

测试

所有新功能或错误修复都必须经过测试。测试使用phpunit，可以通过以下命令运行

composer run-script test

编码标准

此库使用psr2编码标准和squizlabs/php_codesniffer进行linting。为此有一个composer脚本

composer run-script lint

拉取请求

在创建包含您更改的拉取请求之前，预提交脚本必须通过。可以按照以下方式运行

composer run-script pre-commit

致谢

此软件包由Practically.io创建和维护

practically / yii2-chartjs

维护者

详细信息