CanvasJS 反应图 - 官方
彩相画 反应图表 为您的反应应用程序创建交互图表的组件。 图书馆支持多种图表类型,包括栏,行,区,派,甜甜圈等.
重要链接
安装 CanvasJS 重现图表
从 npm 向您的应用程序安装 CanvasJS 重现图表 .
通过国家预防机制安装反应图表
npm install @canvasjs/react-charts
见 npm 文档 更了解npm的用法.
导入反应图表组件
将“反应图表”模块导入您的“反应”应用程序.
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
设置图表选项创建图表( C)
设置图表选项并使用“ CanvasJSChart” 选择器创建图表 .
class App extends Component {
render() {
const options = {
title: {
text: "Basic Column Chart in React"
},
data: [{
type: "column",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 25 },
{ label: "Mango", y: 30 },
{ label: "Grape", y: 28 }
]
}]
}
return (
<div>
<CanvasJSChart options = {options}
/* onRef = {ref => this.chart = ref} */
/>
</div>
);
}
}
交互式反应图表
带有多 Y 轴的回放图
用缩放/ 平面显示图表
