alibaba / cloud-charts

开箱即用的前端图表库,简单配置就能拥有漂亮的可视化图表

Home Page:http://cloud-charts.gitee.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

如何用代码去控制节点的显示隐藏

YoLTeng opened this issue · comments

需求:: 因数据量巨大,因此需要默认加载时先展示10个节点信息,其他的先隐藏。需要能全选
框架: React
解决方案 : 将配置项data使用state去控制,控制data中每一项数据的visible,实现节点的显隐
import {ConsoleLineChart} from "@alicloud/comsole-charts" export default class Chart extends Component { state = { initialChartValue: [{ "name":"机房A", "data":[[1483372800000,4092],[1483459200000,1592],[1483545600000,3714],[1483632000000,4854],[1483718400000,6514],[1483804800000,9022],[1483891200000,6023],[1483977600000,4018]], "visible": 'true', }, { "name":"机房B", "data":[[1483372800000,6051],[1483459200000,3278],[1483545600000,5175],[1483632000000,6548],[1483718400000,9048],[1483804800000,11394],[1483891200000,8597],[1483977600000,6588]] }], "visible": 'true', }] ....... render () { return ( <ConsoleLineChart data={this.state.initialChartValue} /> ) } }
问题: 当我在图标下方增加了一个全选按钮通过更改状态中的visible去控制节点的显隐时,是可以生效的,但是当我手动去点击图例之后,我的全选按钮功能就失效了。
对于这种需求平台这边有什么好的api可供使用么,在文档里也没有这种情景可供参考

希望能帮助解答下,感谢。

这里写的节点是指数据项还是一组数据中的点?
例如下图,是有很多条折线,还是一条折线有很多数据需要隐藏?
image

数据项应该是,需要去控制折线的显隐

我说的节点,应该就是折线的意思

你使用的是 https://cloud-charts.gitee.io/example/Recommendation/legend-disable 这个默认隐藏数据的功能是吧?现在遇到的问题是什么呢?我没太明白。