项目开发和毕设都需要用到图表,在公司用的antd,索性用其下的Bizcharts。
大佬让我学习下其API,做下技术储备,项目开发会用到。
这是Bizcharts官方下的代码,一个简单的折线图,以此为例,学习相关API,做下简单的注释记录。
import React from "react";
import {
G2,
Chart,
Geom,
Axis,
Tooltip,
Coord,
Label,
Legend,
View,
Guide,
Shape,
Facet,
Util
} from "bizcharts";
class Basic extends React.Component {
render() {
const lineStyle = {
stroke: 'dddddd',
fill: '#ffffff',
lineDash: [2, 2, 3],
lineWidth: 3
}
const data = [
{
year: "1991",
value: 3
},
{
year: "1992",
value: 4
},
{
year: "1993",
value: 3.5
},
{
year: "1994",
value: 5
},
{
year: "1995",
value: 4.9
},
{
year: "1996",
value: 6
},
{
year: "1997",
value: 7
},
{
year: "1998",
value: 9
},
{
year: "1999",
value: 13
}
];
//scale 配置数据比例尺,该配置会影响数据在图表中的展示方式
const cols = {
//人话:y轴的最小值和最大值设置地方
value: {//根据与自定义的数据源来判断该类型是什么?type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', 像这里是连续的数值,就是linear,不同类型可能有不同的参数,下面的min就是
// min: 0,//数据最小值为该图表的纵坐标起始点,当需要界定是可以用到
type: 'linear',//官方Demo经常省略
minLimit : 0, //似乎和min区别就是y轴的最大值一定比数据中的最大值大,而min会刚刚好
// max : 13
alias : '数据别名'
},
year: {
range: [0, 1],//TODO 度量转换的范围,不太懂
alias : '这里也可以改动标题'
}
};
//forceFit 图表的宽度自适应开关,默认为 false,设置为 true 时表示自动取 dom(实例容器)的宽度,此时width设置会失效。
//只提供自适应父容器宽度的功能,不能自适应高度
return (
<div>
<Chart height={400} data={data} scale={cols} forceFit>
<Axis name="year" title line ={lineStyle}/>/*name字段对应数据源的字段名*/
<Axis name="value" />
<Tooltip
crosshairs={{
type: "cross"//rect: 矩形框,x: 水平辅助线,y: 垂直辅助线,cross: 十字辅助线
}}
/>
//几何标记对象,决定创建图表的类型,几何标记和坐标系共同决定的
<Geom type="line" position="year*value" size={2} color={['value', '#ff0000-#00ff00' ]} />
<Geom
type="point"
position="year*value"
size={4}
shape={"circle"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
);
}
}
ReactDOM.render(<Basic />, mountNode)
有网友说,注释如注解,注解如笔记,程序员的笔记。认真阅读官方文档,好好学习,多多笔记。
行有不得,反求诸己 --孟子