{"id":21827501,"url":"https://github.com/laixiangran/e-ngx-chart","last_synced_at":"2026-05-21T07:06:31.551Z","repository":{"id":57218001,"uuid":"89125610","full_name":"laixiangran/e-ngx-chart","owner":"laixiangran","description":"基于Angular的图表组件，依赖第三方插件：highcharts","archived":false,"fork":false,"pushed_at":"2018-11-15T01:39:44.000Z","size":7591,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T08:27:19.810Z","etag":null,"topics":["angular","chart","highcharts"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-23T07:44:54.000Z","updated_at":"2018-09-03T10:18:02.000Z","dependencies_parsed_at":"2022-09-07T18:41:48.277Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-chart","commit_stats":null,"previous_names":["laixiangran/essence-ng2-chart"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244796237,"owners_count":20511665,"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":["angular","chart","highcharts"],"created_at":"2024-11-27T18:13:22.089Z","updated_at":"2026-05-21T07:06:26.524Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-chart\n\n基于Angular的图表组件。\n\n依赖的第三方插件：[highcharts](https://www.hcharts.cn/demo/highcharts)\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-chart\n\t```\n\n2. Add the ENgxChartModule\n\n\t```typescript\n\timport { ENgxChartModule } from \"e-ngx-chart\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxChartModule\n\t    ]\n\t})\n\t```\n\n3. template\n\n\t```html\n\t\u003cdiv class=\"chart-main\" eNgxChart [chartOptions]=\"chartOptions\"\u003e\u003c/div\u003e\n\t```\n\n4. component\n\n\t```typescript\n\timport { ENgxChartOptions } from \"e-ngx-chart\";\n\t\n\tchartOptions = new ENgxChartOptions({\n    \t\tchart: {\n    \t\t\ttype: \"column\"\n    \t\t},\n    \t\ttitle: {\n    \t\t\ttext: \"\"\n    \t\t},\n    \t\txAxis: {\n    \t\t\tcategories: [\"西冉村\", \"宝山\", \"苗寨\", \"四季青\", \"北坞村\", \"金河闸\", \"田村\", \"香山\"],\n    \t\t\ttitle: {\n    \t\t\t\ttext: null\n    \t\t\t},\n    \t\t\ttickLength: 0\n    \t\t},\n    \t\tyAxis: {\n    \t\t\tmin: 0,\n    \t\t\ttitle: {\n    \t\t\t\ttext: null\n    \t\t\t},\n    \t\t\tlabels: {\n    \t\t\t\talign: \"center\"\n    \t\t\t}\n    \t\t},\n    \t\tseries: [{\n    \t\t\tdata: [100, 120, 130, 140, 250, 160, 230, 180]\n    \t\t}],\n    \t\tcredits: {\n    \t\t\tenabled: false\n    \t\t},\n    \t\tlegend: {\n    \t\t\tenabled: false\n    \t\t},\n    \t\ttooltip: {\n    \t\t\tenabled: false\n    \t\t}\n    \t});\n\t```\n\n## API\n\n### exportAs\n\n- `eNgxChart` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxChart=\"eNgxChart\"`）。\n\n### Inputs\n\n- `type`（`string?='chart'`） - 图表类型。`chart` 表示 HighCharts，`stockChart` 表示 HighStock\n\n- `chartOptions`（`ENgxChartOptions`） - new ENgxChartOptions(options)时，options与[Highcharts的配置属性](https://api.hcharts.cn/highcharts)一致\n\n### Outputs\n\n- `ready` - 初始化完成的事件，$event为当前ENgxChartDirective实例\n\n### Instance Method\n\n#### ENgxChartDirective\n\n- `chartDestroy()` - 销毁图表控件\n\n#### ENgxChartOptions\n\n- `setData(data: any[], index: number = 0)` - 设置数据列的值。其中index为数据列序号。\n\n- `setXCategories(categories: any[], index: number = 0)` - 设置x轴分类。其中index为x轴序号。\n\n- `setSeries(series: any)` - 设置数据列。\n\n- `setXaxisCategories(categories: any)` - 设置x轴分类。\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-chart/lists"}