@activepipe/react-chartjs-2 中文文档教程

Question

react-chartjs-2

ChartJs 2
的 React 包装器 开放公关和贡献！

Demo & Examples

现场演示：gor181.github.io/react-chartjs-2

要在本地构建示例，请运行：

npm install
npm start

然后在浏览器中打开 localhost:8000。

Installation via NPM

npm install react-chartjs-2 chart.js --save

Usage

检查 example/src/components/* 的用法。

import {Doughnut} from 'react-chartjs-2';

<Doughnut data={...} />

Properties

• data: PropTypes.object.isRequired,
• height: PropTypes.number,
• legend: PropTypes.object,
• onElementsClick: PropTypes.func,
• options: PropTypes.object,
• redraw: PropTypes.bool,
• width: PropTypes.number

Custom size

为了让 Chart.js 遵守自定义大小，您需要将 maintainAspectRatio 设置为 false，例如：

<Bar
    data={data}
    width={100}
    height={50}
    options={{
        maintainAspectRatio: false
    }}
/>

Chart instance

可以通过将 ref 放置在元素上来访问 Chart 实例：

render() {
    componentDidMount() {
        console.log(this.refs.chart.chart_instance); // returns a Chart.js instance reference
    }
    return (
        <Doughnut ref='chart' data={data} />
    )
}

Events

onElementsClick (function)

单击鼠标时调用的函数在图表元素上，将以数组形式返回该点的所有元素。 检查

{
    onElementsClick: (elems) => {}
    // `elems` is an array of chartElements
}

Development (src, lib and the build process)

注意：来源该组件的代码在 src 中。 lib 中提供了一个转译的 CommonJS 版本（使用 Babel 生成），用于 node.js、browserify 和 webpack。 UMD 包也被构建到 dist，它可以被包含而不需要任何构建系统。

要构建、观察和提供示例（也将观察组件源），请运行 npm start。 如果您只想观察对 src 的更改并重建 lib，请运行 npm run watch（如果您正在使用 ，这很有用npm 链接)。

Thanks

Jed Watson 制作了 react-component yo builder！

License

麻省理工学院执照
版权所有 (c) 2016 Goran Udosic && 领先的应用程序。