# q-react-highchart

> > npm install q-react-highchart

Latest version **1.0.0** (published 2016-11-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install q-react-highchart
pnpm add q-react-highchart
yarn add q-react-highchart
bun add q-react-highchart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-11-04 |
| First published | 2016-11-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jinglong.yan@woqutech.com |
| Maintainers | jinglong.yan |
| Keywords | q-base-chart |

## Links

- npm: https://www.npmjs.com/package/q-react-highchart
- npm.io page: https://npm.io/package/q-react-highchart

## Dependencies (18)

- [react](https://npm.io/package/react.md) ^15.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.3.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.17.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.5
- [highcharts-3d](https://npm.io/package/highcharts-3d.md) 0.1.2
- [highcharts-map](https://npm.io/package/highcharts-map.md) 0.1.2
- [highcharts-more](https://npm.io/package/highcharts-more.md) 0.1.2
- [react-highcharts](https://npm.io/package/react-highcharts.md) ^10.0.0
- [highcharts-funnel](https://npm.io/package/highcharts-funnel.md) 0.1.2
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.16.0
- [highcharts-heatmap](https://npm.io/package/highcharts-heatmap.md) 0.1.2
- [highcharts-treemap](https://npm.io/package/highcharts-treemap.md) 0.1.2
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.16.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.24.0
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.17.0
- [highcharts-exporting](https://npm.io/package/highcharts-exporting.md) 0.1.2
- [highcharts-solid-gauge](https://npm.io/package/highcharts-solid-gauge.md) 0.1.2
- [highcharts-no-data-to-display](https://npm.io/package/highcharts-no-data-to-display.md) 0.1.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-11-04

## README

# 安装
> npm install q-react-highchart

# 本地调试
> npm run dev

[本地测试](http://localhost:8080/)

# ES6转ES5
> npm run babel

# 使用

```javasrcipt
import { LineChart, PieChart }　from 'q-react-highchart';

const lineSeries = [
  {
    name: 'name1',
    data: [{
      x: 1231232131,
      y: 1123,
    }, {
      x: 1231235551,
      y: 1123123,
    }],
  },
];

const lineConfig = {
  colors: ['#F06C53', '#56bc76', '#1eb7d8', '#7A5AA6', '#F0CA4D', '#98CB65', '#0873b9'],
};


const pieSeries =[
  {        
    suffix: 'GB', 
    name: 'A-1', 
    y: 100,
  },
  {        
    suffix: 'GB', 
    name: 'B-1', 
    y: 30,
  }
];

const pieConfig = {
  colors: ['#F06C53', '#56bc76', '#1eb7d8', '#7A5AA6', '#F0CA4D', '#98CB65', '#0873b9'],
};


class　Demo extends Component {
  constructor(props) {
    super(props);
  }

  render () {

    return (
      <div>
        <div>
          <LineChart data={lineSeries} config={lineConfig} />
          <PieChart data={pieSeries} config={pieConfig} />
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

```

# LineChart线性图
| 参数　　　　　　|  类型          | 描述   |
|--------------|----------------|-------|
| data         | Array          |图表数据 |
| config       | Object         |[图表配置](http://api.hcharts.cn/highcharts)|


## data
| 参数　　　　　　|  类型          | 描述    |
|--------------|----------------|--------|
| x            | string|number  |横轴坐标值|
| y            | number         |纵轴坐标值|
| suffix       | string　　　　　 |纵轴单位 |


# PieChart饼图
| 参数　　　　　　|  类型          | 描述   |
|--------------|----------------|-------|
| data         | Array          |图表数据 |
| config       | Object         |[图表配置](http://api.hcharts.cn/highcharts)|


## data
| 参数　　　　　　|  类型          | 描述    |
|--------------|----------------|--------|
| name         | string　　　　　 |显示名称 |
| y            | number         |饼图值　　|
| suffix       | string　　　　　 |饼图单位 |

---
_Source: https://npm.io/package/q-react-highchart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._