{"id":22079801,"url":"https://github.com/stack-stark/ngx-g2plot","last_synced_at":"2025-07-24T14:31:42.065Z","repository":{"id":54788154,"uuid":"261945333","full_name":"stack-stark/ngx-g2plot","owner":"stack-stark","description":"g2plot的angular封装 Angular library based on @antv/g2plot","archived":false,"fork":false,"pushed_at":"2021-11-18T01:58:35.000Z","size":813,"stargazers_count":18,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T01:17:13.184Z","etag":null,"topics":["angular","g2","g2plot","ngx","ngx-g2plot"],"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/stack-stark.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}},"created_at":"2020-05-07T03:59:48.000Z","updated_at":"2021-10-03T09:21:40.000Z","dependencies_parsed_at":"2022-08-14T03:00:39.262Z","dependency_job_id":null,"html_url":"https://github.com/stack-stark/ngx-g2plot","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stack-stark/ngx-g2plot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fngx-g2plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fngx-g2plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fngx-g2plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fngx-g2plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stack-stark","download_url":"https://codeload.github.com/stack-stark/ngx-g2plot/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stack-stark%2Fngx-g2plot/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266855772,"owners_count":23995545,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","g2","g2plot","ngx","ngx-g2plot"],"created_at":"2024-11-30T23:11:21.411Z","updated_at":"2025-07-24T14:31:41.795Z","avatar_url":"https://github.com/stack-stark.png","language":"TypeScript","readme":"## NgxG2plot\n\nangular的g2plot封装,方便使用。\n\n## 安装\n\n``` bash\nnpm install --save  ngx-g2plot\n#or\nyarn add ngx-g2plot\n```\n\n## 在线预览\n\nhttps://stack-stark.github.io/ngx-g2plot-preview-compiled/\n\n## 使用\n\n#### line.component.html\n\n``` html\n\u003cdiv starkG2plotLine  #divG2plotLine=\"g2plotLine\" [options]=\"options\"\u003e\u003c/div\u003e\n```\n\n#### line.component.ts\n``` js\nimport { Component, ViewChild } from '@angular/core';\nimport { G2plotLineDirective } from 'ngx-g2plot';\n\n@Component({\n  selector: 'app-line',\n  templateUrl: './line.component.html',\n  styleUrls: ['./line.component.less']\n})\nexport class LineComponent {\n\n  constructor() { }\n  //获取到指令对象 \n  @ViewChild('divG2plotLine') divG2plotLine!: G2plotLineDirective;\n\n  data: Array\u003cobject\u003e = [\n    { year: '1991', value: 3 },\n    { year: '1992', value: 4 },\n    { year: '1993', value: 3.5 },\n    { year: '1994', value: 5 },\n    { year: '1995', value: 4.9 },\n    { year: '1996', value: 6 },\n    { year: '1997', value: 7 },\n    { year: '1998', value: 9 },\n    { year: '1999', value: 13 },\n  ];\n\n  options = {\n    title: {\n      visible: true,\n      text: '折线图',\n    },\n    description: {\n      visible: true,\n      text: '用平滑的曲线代替折线。',\n    },\n    data: this.data,\n    xField: 'year',\n    yField: 'value',\n  };\n\n  update(): void {\n   const options = {\n      title: {\n        visible: true,\n        text: 'The line chart',\n      },\n      description: {\n        visible: true,\n        text: 'Replace broken lines with smooth curves.',\n      },\n      xField: 'year',\n      yField: 'value',\n    };\n    this.divG2plotLine.update(options);\n  }\n\n  changeData(): void {\n    const data = [\n      { year: '1991', value: 13 },\n      { year: '1992', value: 14 },\n      { year: '1993', value: 13.5 },\n      { year: '1994', value: 15 },\n      { year: '1995', value: 14.9 },\n      { year: '1996', value: 16 },\n      { year: '1997', value: 17 },\n      { year: '1998', value: 19 },\n      { year: '1999', value: 23 },\n    ];\n    this.divG2plotLine.changeData(data);\n  }\n\n\n  destroy(): void {\n    this.divG2plotLine.destroy();\n  }\n\n  changeSize(): void {\n    //使用当前实例方法 \n    this.divG2plotLine.instance.changeSize(300, 300);\n  }\n}\n\n```\n#### line.module.ts\n``` ts\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { G2plotLineModule } from 'ngx-g2plot';\n\n@NgModule({\n  declarations: [G2plotDemoComponent],\n  imports: [\n    CommonModule,\n    G2plotLineModule\n  ]\n})\nexport class G2plotDemoModule { }\n```\n## 提示 \n我通过指定exportAs导出`update()、changeData()、destroy()`这三种方法，以便您可以在任何时候更改图表。使用方法见上面\n\n如果你需要获取当前图表实例及其所有属性和方法,可使用`this.xxx.instance`,参考见上面的`changeSize()`\n\n图表所有方法见官方文档: https://g2plot.antv.vision/zh/docs/manual/plot-api\n\n## 所有指令列表\n\n指令名/Directive | 图表名 | exportAs | Module\n-|-|-|-\nstarkG2plotArea | Area - 面积图 | g2plotArea | G2plotAreaModule\nstarkG2plotBar | Bar - 基础条形图  | g2plotBar | G2plotBarModule\nstarkG2plotBidirectionalBar | BidirectionalBar - 对称条形图 | g2plotBidirectionalBar | G2plotBidirectionalBarModule\nstarkG2plotBox | Box - 箱图  | g2plotBox | G2plotBoxModule\nstarkG2plotBullet | Bullet - 子弹图 | g2plotBullet | G2plotBulletModule\nstarkG2plotChord | Chord - 弦图 | g2plotChord | G2plotChordModule\nstarkG2plotColumn | Column - 柱状图  | g2plotColumn | G2plotColumnModule\nstarkG2plotDualAxes | DualAxes - 柱线混合图  | g2plotDualAxes | G2plotDualAxesModule\nstarkG2plotFunnel | Funnel - 漏斗图  | g2plotFunnel | G2plotFunnelModule\nstarkG2plotGauge | Gauge - 仪表盘 | g2plotGauge | G2plotGaugeModule\nstarkG2plotHeatmap | Heatmap - 热力图 | g2plotHeatmap | G2plotHeatmapModule\nstarkG2plotHistogram | Histogram - 直方图  | g2plotHistogram | G2plotHistogramModule\nstarkG2plotLine | Line - 折线图 | g2plotLine | G2plotLineModule\nstarkG2plotLiquid | Liquid - 水波图 | g2plotLiquid | G2plotLiquidModule\nstarkG2plotPie | Pie - 饼图  | g2plotPie | G2plotPieModule\nstarkG2plotRadialBar | RadialBar - 玉珏图 | g2plotRadialBar | G2plotRadialBarModule\nstarkG2plotRadar | Radar - 雷达图 | g2plotRadar | G2plotRadarModule\nstarkG2plotRose | Rose - 玫瑰图  | g2plotRose | G2plotRoseModule\nstarkG2plotSankey | Sankey - 桑基图  | g2plotSankey | G2plotSankeyModule\nstarkG2plotScatter | Scatter - 散点图 | g2plotScatter | G2plotScatterModule\nstarkG2plotStock | Stock - 股票图 | g2plotStock | G2plotStockModule\nstarkG2plotSunburst | Sunburst - 旭日图图 | g2plotSunburst | G2plotSunburstModule\nstarkG2plotTinyColumn | TinyColumn - 迷你图 | g2plotTinyColumn | G2plotTinyColumnModule\nstarkG2plotTreemap | Treemap - 树图 | g2plotTreemap | G2plotTreemapModule\nstarkG2plotWaterfall | Waterfall - 瀑布图  | g2plotWaterfall | G2plotWaterfallModule\nstarkG2plotWordCloud | WordCloud - 词云 | g2plotWordCloud | G2plotWordCloudModule\n\n### 关于命名\n\n指令名为 `starkG2plot` + `官方图表名称`, exportAs导出为`g2plot` + `官方图表名称`, Module为 `G2plot` + `官方图表名称` + `Module`\n\n## g2plot官方文档地址\nhttps://g2plot.antv.vision/zh/docs/manual/introduction\n\n## 使用遇到了问题或者缺陷? \nhttps://github.com/stack-stark/ngx-g2plot/issues\n\n## License\nMIT","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstack-stark%2Fngx-g2plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstack-stark%2Fngx-g2plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstack-stark%2Fngx-g2plot/lists"}