当前位置:网站首页>bizchart+slider实现分组柱状图
bizchart+slider实现分组柱状图
2022-07-04 20:57:00 【悟初境】
下面使用bizchart实现分组柱状图,并带有滑块选择。效果图如下:
环境
基于bizchart3.x
npm install [email protected]
npm install [email protected]
Chart-Slider组件封装
Chart和Slider是2个组件,为了方便使用,我们封装在一起,用一个函数返回。
import DataSet from '@antv/data-set';
import {
Axis, Chart, Geom, Legend, Tooltip } from "bizcharts";
import Slider from "bizcharts-plugin-slider";
import React, {
Component } from 'react';
function getGroupChartWithSliderComponent(data) {
const ds = new DataSet({
state: {
start: data[0] ? data[0].timestamp : '',
end: data[0] ? data[data.length - 1].timestamp : '$'
}
});
const dv = ds.createView('origin').source(data);
dv.transform({
type: 'filter',
callback(item) {
const r = item.timestamp;
return r >= ds.state.start && r <= ds.state.end;
}
});
class GroupChartWithSlider extends React.Component {
handleTimeSliderChange(e) {
const {
startValue, endValue } = e;
ds.setState('start', startValue);
ds.setState('end', endValue);
}
render() {
const chartScale = {
'timestamp': {
alias: '时间'
},
'count': {
alias: '次数'
}
};
return (
<div>
<Chart height={
200} data={
dv} forceFit padding='auto' scale={
chartScale}>
<Legend position="top-center" />
<Axis name="timestamp" />
<Axis name="count" />
<Tooltip />
<Geom
type="interval"
position="timestamp*count"
color={
["tag"]}
// color={["tag", ["#f5222d", "#ec6740", "#ffa39e"]]}
adjust={
[
{
type: "dodge",
marginRatio: 1 / 32
}]}
style={
{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
<Slider data={
data} padding={
10} xAxis="timestamp" yAxis="count"
scales={
{
// 不显示文本
timestamp: {
formatter: () => ''
}
}}
onChange={
this.handleTimeSliderChange.bind(this)} />
</div>
);
}
}
return GroupChartWithSlider;
}
使用
要生成分组柱状图,只需要同一个X轴的值有多个Y值即可,下面X轴是 timestamp
, Y轴是 count
.
class MyApp extends Component {
state = {
// 聚合分组柱状图图数据
groupErrorData: [/* { "timestamp": '2022-6-22T11:43', "count": 15, "tag": "鸡蛋", }, { "timestamp": '2022-6-22T11:43', "count": 3, "tag": "香蕉", }, { "timestamp": '2022-6-22T11:43', "count": 19, "tag": "南瓜", }, { "timestamp": '2022-6-22T11:43', "count": 5, "tag": "西南花", }, { "timestamp": '2022-6-22T11:45', "count": 6, "tag": "冬瓜", }, { "timestamp": '2022-6-22T11:45', "count": 20, "tag": "芹菜", }], }; render() { const GroupChartWithSlider = getGroupChartWithSliderComponent(this.state.groupErrorData); return ( <div> <GroupChartWithSlider /> </div > ); } } export default MyApp;
Slider效果
Slider可以拖动,显示数据的趋势。
边栏推荐
- Lambdaquerywrapper usage
- Methods of improving machine vision system
- [early knowledge of activities] list of recent activities of livevideostack
- The video sound of station B is very low - solution
- Word文档中标题前面的黑点如何去掉
- How is the entered query SQL statement executed?
- Jerry's ad series MIDI function description [chapter]
- 【C語言】符號的深度理解
- [wechat applet] collaborative work and release
- 创客思维在高等教育中的启迪作用
猜你喜欢
The video sound of station B is very low - solution
Redis03 - network configuration and heartbeat mechanism of redis
杰理之增加进关机前把触摸模块关闭流程【篇】
Huawei ENSP simulator configures DHCP for router
【公开课预告】:视频质量评价基础与实践
Application practice | Shuhai supply chain construction of data center based on Apache Doris
Configuration of DNS server of Huawei ENSP simulator
At the right time, the Guangzhou station of the city chain science and Technology Strategy Summit was successfully held
[C language] deep understanding of symbols
Super detailed tutorial, an introduction to istio Architecture Principle and practical application
随机推荐
【微信小程序】协同工作与发布
Arcgis 10.2.2 | arcgis license server无法启动的解决办法
【公开课预告】:视频质量评价基础与实践
解析互联网时代的创客教育技术
minidom 模塊寫入和解析 XML
Three or two things about the actual combat of OMS system
Jerry's ad series MIDI function description [chapter]
Huawei ENSP simulator enables devices of multiple routers to access each other
[buuctf.reverse] 151_[FlareOn6]DnsChess
TCP shakes hands three times and waves four times. Do you really understand?
淘宝商品评价api接口(item_review-获得淘宝商品评论API接口),天猫商品评论API接口
redis布隆过滤器
Billions of citizens' information has been leaked! Is there any "rescue" for data security on the public cloud?
[early knowledge of activities] list of recent activities of livevideostack
Huawei ENSP simulator configures ACL access control list
How to use concurrentlinkedqueue as a cache queue
Delphi SOAP WebService 服务器端多个 SoapDataModule 实现相同的接口方法,接口继承
redis发布订阅的使用
TCP三次握手,四次挥手,你真的了解吗?
Jerry's ad series MIDI function description [chapter]