AntV G2多折线图legend全选功能添加

AntV中G2多折线图增加全选框

 methods: {
    init() {
      const data = this.chartdata
      const option = {
        data,
        xField: this.columns.dimensionality[1],
        yField: this.columns.magnanimity[0],
        seriesField: this.columns.dimensionality[0],
        color: '#0e5291',
        yAxis: {
          label: {
            formatter: v => `${(v / 10e8).toFixed(1)} B`
          }
        },
        legend: {
          position: 'top',
          selected: {}
           //selected:{'邮件营销':true,'联盟广告':false,'视频广告':true,'直接访问':true,'搜索引擎':true}
        },
      }
      const line = new Line('container5', option)
      // 绑定legend的点击事件(
      line.on('legend-item:click', (event) => {
        const item = event.target.get('delegateObject').item
        const name = item.name
        option.legend.selected[name] = !item.unchecked
        console.log(option.legend)
      })
      line.render()
    }
  }

这里省略了div里的全选框事件

可以通过全选框事件,设置option中selected的属性值,进而控制图表中legend。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AntV G2 可以通过多种方式实现分组柱状图和折线图的混合画法,以下是其中一种实现方法: 1. 首先,定义数据格式,包括 x 轴数据、柱状图数据和折线图数据。 2. 然后,使用 G2 的图表配置方法,设置 x 轴和 y 轴的属性。 3. 接下来,使用 G2 的图表创建方法,创建柱状图和折线图对象。 4. 最后,将柱状图对象和折线图对象添加到同一个视图中,实现分组柱状图和折线图的混合画法。 以下是一个示例代码,实现了分组柱状图和折线图的混合画法: ```javascript import { Chart } from '@antv/g2'; // 定义数据格式 const data = [ { x: '一月', y1: 10, y2: 20 }, { x: '二月', y1: 20, y2: 30 }, { x: '三月', y1: 30, y2: 40 }, { x: '四月', y1: 40, y2: 50 }, { x: '五月', y1: 50, y2: 60 }, { x: '六月', y1: 60, y2: 70 }, ]; // 创建图表对象 const chart = new Chart({ container: 'container', autoFit: true, height: 500, }); // 设置 x 轴和 y 轴的属性 chart.scale({ x: { range: [0, 1] }, y: { min: 0 }, }); // 创建柱状图对象 const bar = chart .interval() .position('x*y1') .color('x') .adjust([{ type: 'dodge', marginRatio: 0.1 }]); // 创建折线图对象 const line = chart .line() .position('x*y2') .color('x'); // 添加柱状图对象和折线图对象到同一个视图中 chart.render(); bar.render(); line.render(); ``` 该示例代码创建了一个包含两组数据的分组柱状图和一组数据的折线图,其中柱状图和折线图共享 x 轴,分别对应 y1 和 y2,柱状图和折线图的颜色按照 x 轴分组。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值