RT,传入组件的数据格式(props)为
{
data: [
{time: '2018-12-10 12:12:12', uv: 43, pv: 45},
...
]
}
单维度条形图上无展示问题,多组条形图上传入数据后报错:
我看 slider 插件引用的是 @antv/g2-plugin-slider
,但翻遍 bizCharts 以及 G2-plugin-slider 也没看到关于复杂数据类型的配置说明,所以只能按照示例中给的格式如下书写,报错信息为:
Uncaught (in promise) TypeError: Cannot read property 'Group' of undefined
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at bizcharts-plugin-slider.min.js:1
at bizcharts-plugin-slider.min.js:1
at bizcharts-plugin-slider.min.js:1
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at e (bizcharts-plugin-slider.min.js:1)
at bizcharts-plugin-slider.min.js:1
at bizcharts-plugin-slider.min.js:1
at bizcharts-plugin-slider.min.js:1
at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
at fn (bootstrap c65ba54f9f0ad8d75c02:112)
at Object.<anonymous> (BarChartWithBrush.js:18)
at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
at fn (bootstrap c65ba54f9f0ad8d75c02:112)
at Object.<anonymous> (index.js:2)
at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
at fn (bootstrap c65ba54f9f0ad8d75c02:112)
at Object.<anonymous> (Index.js:8)
at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
at fn (bootstrap c65ba54f9f0ad8d75c02:112)
除此外,运行官方示例 https://bizcharts.alibaba-inc.com/products/bizCharts/demo/detail?id=g2-area-large&selectedKey=%E6%A6%82%E8%A7%88 会出现如下问题:slider 在首次改变值域范围后,后续无法再继续变更值域(即左右两边无法点按),只能拖住滑动。
代码如下,谢谢。
import React, {useState} from 'react';
import {
Chart,
Geom,
Axis,
Tooltip,
Legend,
} from "bizcharts";
import DataSet from "@antv/data-set";
import Slider from "bizcharts-plugin-slider";
import * as d3 from "d3-array";
import moment from 'moment';
const SimpleBarChart = (props) => {
const {data, settings} = props;
const keysArray = settings.map(e => e.keyName);
const timeRange = d3.extent(data, ({time}) => {
return new Date(time).getTime();
});
timeRange.forEach(element => { // eslint-disable-line
element = moment(element).format('YYYY-MM-DD HH:mm:ss'); // eslint-disable-line
});
const [start, setStart] = useState(timeRange[0]);
const [end, setEnd] = useState(timeRange[1])
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: "fold",
fields: keysArray,
// 展开字段集
key: "x",
// key字段
value: "y", // value字段
callback: (obj) => {
const time = new Date(obj.time).getTime();
return time >= new Date(start).getTime() && time <= new Date(end).getTime();
},
});
return (
<React.Fragment>
<Chart
height={300}
data={dv}
scale={{
time: {
type:'timeCat',
formatter: text => {
return moment(text).format('MM-DD HH:mm')
},
},
}}
forceFit
>
<Axis
name="x"
dataKey="x"
/>
<Axis name="y" datakey="y" />
<Legend />
<Tooltip />
<Geom
type="interval"
position="time*y"
color="x"
adjust={[
{
type: "dodge",
marginRatio: 1 / 64,
},
]}
/>
</Chart>
<Slider
width="auto"
height={26}
xAxis="x"
yAxis="y"
start={start}
end={end}
data={dv}
scales={{
time: {
type: 'timeCat',
},
}}
onChange={(obj) => {
const { startValue, endValue } = obj;
setStart(startValue);
setEnd(endValue);
}}
/>
</React.Fragment>
);
}
export default SimpleBarChart;
参考过的资料有
- https://github.com/antvis/g2-plugin-slider#api-reference
- https://bizcharts.alibaba-inc.com/products/bizCharts/demo/detail?id=g2-area-large&selectedKey=%E6%A6%82%E8%A7%88
- https://bizcharts.alibaba-inc.com/products/bizCharts/api/sliderPlugin
- https://github.com/alibaba/BizCharts/blob/master/plugin/slider/src/index.jsx