{"id":20564707,"url":"https://github.com/dulinrain/react-highchart","last_synced_at":"2026-05-02T23:34:09.067Z","repository":{"id":143944602,"uuid":"140174847","full_name":"DuLinRain/react-highchart","owner":"DuLinRain","description":"基于highchart封装，简化options的配置","archived":false,"fork":false,"pushed_at":"2018-07-08T15:14:52.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-06T08:34:51.728Z","etag":null,"topics":["highcharts","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DuLinRain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-07-08T14:27:06.000Z","updated_at":"2023-02-26T22:00:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"968c0090-efd2-45f1-ba16-055cf16336b0","html_url":"https://github.com/DuLinRain/react-highchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DuLinRain/react-highchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuLinRain%2Freact-highchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuLinRain%2Freact-highchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuLinRain%2Freact-highchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuLinRain%2Freact-highchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DuLinRain","download_url":"https://codeload.github.com/DuLinRain/react-highchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuLinRain%2Freact-highchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267482004,"owners_count":24094508,"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-28T02:00:09.689Z","response_time":68,"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":["highcharts","react"],"created_at":"2024-11-16T04:28:42.605Z","updated_at":"2025-10-19T22:13:42.430Z","avatar_url":"https://github.com/DuLinRain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Highchart封装与使用方法\n\n#### 通过dataInfo简化配置，只需配置data(数据源)、type(图类型)、xkey(x轴键)、ykeys(数值键)四个必备字段，其它可选字段同highcharts的options配置。若dataInfo配置不能满足，也可以通过options完成复杂配置，更多图形及使用示例敬请期待......\n\n\n[点击这里在线查看](http://www.dulinrain.top/react-highchart/index.html)\n\n### github地址\n\n[https://github.com/DuLinRain/react-highchart](https://github.com/DuLinRain/react-highchart)\n\n\n### 使用方法\n\n\timport {HighchartsReact} from './HighchartsReact'\n\timport Highcharts from 'highcharts' //依赖于Highcahrt\n\n\tconst testdata = [{\n\t    name: '2012',\n\t    age: 1,\n\t    height: 100\n\t  }, {\n\t    name: '2013',\n\t    age: 2,\n\t    height: 200\n\t  }, {\n\t    name: '2014',\n\t    age: 5,\n\t    height: 100\n\t  }, {\n\t    name: '2015',\n\t    age: 8,\n\t    height: 170\n\t  }, {\n\t    name: '2016',\n\t    age: 12,\n\t    height: 10\n\t  }, {\n\t    name: '2017',\n\t    age: 19,\n\t    height: 230\n\t  }]\n\n\t\n\t\u003cHighchartsReact\n\t    highcharts={Highcharts}\n\t    options={{}}\n\t    dataInfo={{\n\t      data: testdata,\n\t      type: 'line',\n\t      xkey: 'name',\n\t      ykeys: [{\n\t        key: 'age'\n\t      }, {\n\t        key: 'height'\n\t      }],\n\t      title: {\n\t        text: '基础折线图'\n\t      }\n\t    }}\n\t  /\u003e\n\n\n### 更多图形示例\n\n\n\n### 条形图\n\n![](https://i.imgur.com/yCR071D.png)\n\n### 面积图\n\n![](https://i.imgur.com/vc6gg7u.png)\n\n### 柱状图\n\n![](https://i.imgur.com/OgzJvJO.png)\n\n### 条形图\n\n![](https://i.imgur.com/SCzEdRQ.png)\n\n### 极地图\n\n![](https://i.imgur.com/jIl9Isb.png)\n\n### 蜘蛛图\n\n![](https://i.imgur.com/kPPbPSv.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulinrain%2Freact-highchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulinrain%2Freact-highchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulinrain%2Freact-highchart/lists"}