{"id":20144165,"url":"https://github.com/quansitech/qscmf-chartjs-widgets","last_synced_at":"2026-05-11T10:36:08.179Z","repository":{"id":62531962,"uuid":"278582411","full_name":"quansitech/qscmf-chartjs-widgets","owner":"quansitech","description":"chartjs 组件","archived":false,"fork":false,"pushed_at":"2023-12-01T05:38:13.000Z","size":277,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-18T00:29:19.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quansitech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-10T08:36:33.000Z","updated_at":"2022-09-07T10:54:58.000Z","dependencies_parsed_at":"2023-12-01T06:39:50.066Z","dependency_job_id":null,"html_url":"https://github.com/quansitech/qscmf-chartjs-widgets","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-chartjs-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-chartjs-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-chartjs-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-chartjs-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quansitech","download_url":"https://codeload.github.com/quansitech/qscmf-chartjs-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241587914,"owners_count":19986627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:09:03.317Z","updated_at":"2026-05-11T10:36:04.152Z","avatar_url":"https://github.com/quansitech.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qscmf-chartjs-widgets\n基于[chartjs](https://www.chartjs.org)封装的qscmf后台模块化组件\n\n## 安装\n\n```php\ncomposer require quansitech/qscmf-chartjs-widgets\n```\n\n## 控件列表\n+ [Area](https://github.com/quansitech/qscmf-chartjs-widgets#Area)\n+ [Bar](https://github.com/quansitech/qscmf-chartjs-widgets#Bar)\n+ [Line](https://github.com/quansitech/qscmf-chartjs-widgets#Line)\n\n### 通用用法\nArea Bar Line都是Chart的子类，也是简化开发预设好的类，这里介绍父类Chart的通用用法。\n\n\n```php\n//实例化对象\n//类型参数可以是chartjs支持的任意类型\n//如果是ChartType中已经预设好的类型，会提供一系列内置好的预设属性，简化需要设置的参数\n$area = Factory::getInstance('area');\n\n//设置chartjs外层div的宽度和高度，假如不设置，chartjs将会自适应其外层父容器\n$area-\u003esetWidth(200);\n$area-\u003esetHeight(200);\n\n//设置x坐标标签\n$area-\u003esetLabels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);\n\n//设置图形标题\n$area-\u003esetTitle(\"销售量统计\")\n\n//添加数据源，可以添加多个维度的数据\n//第一个参数该维度数据标题\n//第二个参数，数据组\n$area-\u003eaddDataSet('销售量', [12, 19, 3, 5, 2, 3]);\n\n//可自定义详细的chartjs options配置，合并到组件中\n//该方法用于有更多自定义需求的业务场景\n$options=[\n    'data' =\u003e [\n        'datasets' =\u003e [\n            [\n                'backgroundColor' =\u003e [\n                    'rgba(255, 99, 132, 0.2)',\n                    'rgba(54, 162, 235, 0.2)',\n                    'rgba(255, 206, 86, 0.2)',\n                    'rgba(75, 192, 192, 0.2)',\n                    'rgba(153, 102, 255, 0.2)',\n                    'rgba(255, 159, 64, 0.2)'\n                ],\n                'borderColor' =\u003e [\n                    'rgba(255, 99, 132, 1)',\n                    'rgba(54, 162, 235, 1)',\n                    'rgba(255, 206, 86, 1)',\n                    'rgba(75, 192, 192, 1)',\n                    'rgba(153, 102, 255, 1)',\n                    'rgba(255, 159, 64, 1)'\n                ],\n                'borderWidth' =\u003e 1\n            ]\n        ]\n    ],\n    'options' =\u003e [\n        'scales' =\u003e [\n            'yAxes' =\u003e [\n                [\n                    'ticks' =\u003e [\n                        'beginAtZero' =\u003e true\n                    ]\n                ]\n            ]\n        ]\n    ]\n];\n$area-\u003esetCustomOptions($options);\n```\n\n### Area\n预设的area类型\n\n```php\n$area = Factory::getInstance('area');\n$lables = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];\n$area-\u003esetLabels($lables);\n\n//area类型扩展了第三个参数，可通过第三个参数来设置维度数据的表现背景色\n$area-\u003eaddDataSet('捐赠金额', [12, 19, 3, 5, 2, 3], '#ff851b');\n```\n\n### Bar\n预设的bar类型\n```php\n$bar = Factory::getInstance('bar');\n$lables = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];\n$bar-\u003esetLabels($lables);\n\n//area类型扩展了第三个参数，可通过第三个参数来设置维度数据的表现背景色\n$bar-\u003eaddDataSet('捐赠金额', [12, 19, 3, 5, 2, 3], '#ff851b');\n```\n\n### Line\n预设的line类型\n```php\n$line = Factory::getInstance('line');\n$lables = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];\n$line-\u003esetLabels($lables);\n\n//area类型扩展了第三个参数，可通过第三个参数来设置维度数据的线条颜色\n$line-\u003eaddDataSet('捐赠金额', [12, 19, 3, 5, 2, 3], '#ff851b');\n```\n\n### Pie\n预设的Pie类型\n```php\n$line = Factory::getInstance('pie');\n$lables = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];\n$line-\u003esetLabels($lables);\n\n//area类型扩展了第三个参数，可通过第三个参数来设置维度数据的线条颜色\n$line-\u003eaddDataSet('捐赠金额', [12, 19, 3, 5, 2, 3], [\n    '#4dc9f6',\n    '#f67019',\n    '#f53794',\n    '#537bc4',\n    '#acc236',\n    '#166a8f',\n    '#00a950',\n    '#58595b',\n    '#8549ba'\n]);\n```\n\n### 辅助方法\n\ngenLastDayLabels 快速生成过去N天的labels\n```php\n//第一个参数 指定天数\n//第二个参数 日期展示模板 默认 'm/d'\nHelper::genLastDayLabels(15, 'm/d');\n```\n\ngenLastMonthLabelsPerDay 快速生成过去N个月以天为单位的labels\n```php\n//第一个参数 指定月份\n//第二个参数 日期展示模板 默认 'm/d'\nHelper::genLastMonthLabelsPerDay(1, 'm/d');\n```\n\n### 完整样例代码\n配合[adminlte](https://github.com/quansitech/qscmf-adminlte-widgets)组件完成一个简单统计页面的开发\n\n```php\n$content = new Content($this-\u003eview);\n$content-\u003etitle('网站概况');\n\n$join_line = Factory::getInstance('line');\n$join_line-\u003esetLabels(Helper::genLastDayLabels(15));\n\n$join_data = [1,2,0,4,5,6,7,28,19,0,39, 30,23,12,34];\n$join_line-\u003eaddDataSet('参与人数', $join_data, '#17a2b8');\n\n$read_bar = Factory::getInstance('bar');\n$read_bar-\u003esetLabels(Helper::genLastDayLabels(15));\n$read_data = [1,2,0,4,5,6,7,28,19,0,39, 30,23,12,34];\n$read_bar-\u003eaddDataSet('阅读记录', $read_data, '#28a745');\n\n$doante_area = Factory::getInstance('area');\n$doante_area-\u003esetLabels(Helper::genLastDayLabels(15));\n$donate_data = [1,2,0,4,5,6,7,28,19,0,39, 30,23,12,34];\n$doante_area-\u003eaddDataSet('捐赠金额', $donate_data, '#ff851b');\n\n$card_row = new Row();\n$card_row-\u003eaddColumn($join_line, 4);\n$card_row-\u003eaddColumn($read_bar, 4);\n$card_row-\u003eaddColumn($doante_area, 4);\n$content-\u003eaddRow(new Card($card_row, '统计', 'danger'));\n\n$content-\u003edisplay();\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqscmf-chartjs-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquansitech%2Fqscmf-chartjs-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqscmf-chartjs-widgets/lists"}