alibaba / bizgoblin

基于F2 React 移动端可视化图表库

Document

API

Installation

npm

The NPM way is only install by shell:

# latest stable
$ npm install goblin-base

React Version

In react version, You mush repare react version greater then 15, and support 16 certainly.

npm

The NPM way is only install by shell:

# latest stable
$ npm install bizgoblin

Demo

To examine the demos in your local build, open to demo directory, and execute

$ npm run postinstall
$ cd ./demo && npm install
$ npm run start

and then browse to http://localhost:3000

License

MIT

bizgoblin's Issues

如何手动触发chart.clean()？

同一份数据源，切换数据展示类型（y轴），两份图表都被渲染出来。

在goblin中有commonChart类，希望可以暴露出clear方法

怎样给柱状图上方显示数值

请问该库是否不再继续维护？

如果不再继续维护或者是在重构新版本，能否在README中体现！

Axis组件label属性修改文字样式部分文档有误

textStyle中的样式不起效

需修改为

柱状图上方显示对应的标注

bizcharts增加标注只需要，但是BizGoblin没有Label标签，没法增加，有什么办法可以解决

BizGoblin 如何去掉动画效果 ？ bizcharts 设置 animate={false} 就行 BizGoblin了 ？？？ 文档没写

BizGoblin 如何去掉动画效果，现在默认是开启的 ？ bizcharts 设置 animate={false} 就行 BizGoblin了 ？？？ 文档没写

IOS 浏览器中图表点击时显示的悬浮tip需要通过双击激活，无法类是Android或PC一样，点击显示

F2中的Scalex在BizGoblin怎么使用？

Legend，custom的介绍里，请问chart.legend是哪来的啊

How to create a custom shape?

import { Shape } from 'bizGoblin'
it doesn't work. Will it be updated?

latest umd version is a valid bundle

version of goblin bundled into the latest version(v0.1.9) of bizgoblin is still in version 0.1.7, so checkChartConfig is still error

叠加bar和多条line组合

请问下这种叠加组合数据结构应该怎么设计，或者有example可以参考下吗，，谢谢

Interaction 支持

如题，会支持Interaction 吗？F2-Interaction

Axis的label属性设置不生效

label属性里设置的属性都不生效？请问有没有替代方法？

@alife/bizcharts-plot-mobile-core

请问这个包怎么安装

坐标轴的文本有没有办法自动旋转，autoRotate 不生效

坐标轴的文本有没有办法自动旋转，autoRotate 不生效

BUG: there is no repaint when data changes

I find the problem is in these code:

BizGoblin/packages/goblin/src/core/CommonChart.ts

Lines 100 to 105 in d245d3f

	// private repaintData (chart: any, oriConfig: IMainConfig, config: IMainConfig) {
	// if ((!Util.isNil(oriConfig.data) || !Util.isNil(config.data)) &&
	// !Util.isEqual(oriConfig.data, config.data)) {
	// chart.changeData(config.data);
	// }
	// }

Why delete the repaintData function, is there other consideration?

setSeriesGeom created duplicate config

BizGoblin/packages/goblin/lib/components/setSeriesConfig.js

Line 20 in 717c2eb

geomObj = chart.line();

code in above add new geom, but not remove exist

code in f2

self.addGeom(geom);

改变图表类型，会出现两个图表.

文档示例地址
修改如下：

class Demo extends React.Component {
  state = {
    type: 'interval',
  };
  onClick = () => {
    let { type } = this.state;
    type === 'interval' ? type = 'line' : type = 'interval';
    this.setState({ type });
  };
  render() {
    return (
      <div>
        <Chart height={300} width="100%" data={data} defs={defs} animate={{ type: 'scaley' }} pixelRatio={pixelRatio}>
          <Axis dataKey="year" label={{ fontSize: 8 }}/>
          <Axis dataKey="sales"/>
          <Tooltip showItemMarker={false} onShow={onShowTooltip}/>
          <Geom geom={this.state.type} position="year*sales"/>
          <Legend/>
        </Chart>
        <button onClick={this.onClick}>改变</button>
      </div>
    );
  }
}

BizGoblin不支持react-native么？

Chart 组件重绘在 ios safari 12 下内存溢出

Chart 组件不能重绘，详见问题 #4 。所以我强制更新 Chart 组件的 key 让它重绘。但这么做会频繁创建和销毁 canvas，导致 ios safari 12 下内存溢出问题。

confused data

const data = [
  { amount: 20, ratio: 0.1, memo: '学习', const: 'const' },
  { amount: 100, ratio: 0.5, memo: '睡觉', const: 'const' },
  { amount: 10, ratio: 0.05, memo: '吃饭', const: 'const' },
  { amount: 30, ratio: 0.15, memo: '讲礼貌', const: 'const' },
  { amount: 10, ratio: 0.05, memo: '其他', const: 'const' },
  { amount: 20, ratio: 0.1, memo: '运动', const: 'const' },
  { amount: 10, ratio: 0.05, memo: '暂无备注', const: 'const' }
]

In the demo, the const key seems needless, is there any reason to add it?

If so, users must to do an extra convert from origin data.

function convertData(data) {
  return data.map(value => {
    return {
      ...value,
      const: 'const'
    }
  })
}

F2中的 PieLabel 在 BizGoblin 中如何使用呢？

BizGoblin 设置渐变色 颜色不明显 透明度 太低 了 ，能自定义最好。

红色 被透明度 影响 太多了。

Chart data变化不触发图表刷新

我看代码中，Chart 组件的 componentWillReceiveProps 实现是空的

BizGoblin/packages/goblin-react/src/components/Chart.tsx

Line 180 in 6f0d680

componentWillReceiveProps (nextProps: IRChart) {

图表刻度与设置的tickCount属性值不一致？

图表刻度与设置的tickCount属性值不一致？