g2条形图填充色设置渐变色

本文介绍了在不同AntVG2版本(4.*和5.*)中如何正确设置条形图的填充色渐变,以及两个版本之间的差异。4.*不支持直接设置,而在5.*及以上版本中可以直接使用linear-gradient。官方文档提供了详细示例和相关资源链接。
摘要由CSDN通过智能技术生成

g2 条形图填充色设置渐变色

为了方便可以直接访问 github 链接

  • 在 antv/g2 4.*版本

在 4.*版本是不支持设置 fill 属性为

linear-gradient(-90deg, white 0%, darkgreen 100%)

设置完会是黑色,正确做法如下:

// 举个🌰
const interval = chart
  .interval()
  .position("x*y")
  .size(100)
  .style({ fill: "l (90) 0.5: rgba(20,98,255,1) 1:rgba(77,184,255,1) " });
  • 在 antv/g2 5.*版本

样式中可以直接使用

.style('fill', 'linear-gradient(-90deg, white 0%, darkgreen 100%)')

具体可以参考这里官方的例子
https://g2.antv.antgroup.com/examples/general/area#area-gradient

效果
img

补充:
可以查看图表的样式所有样式地址,最下面有 v4 版本渐变色和纹理设置的用法
https://g2-v4.antv.vision/zh/docs/api/shape/shape-attrs/#%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
要将 antv/g2 水波纹背景设置渐变色,可以使用 G2 的自定义渲染功能来实现。以下是一个简单的例子: 首先,需要引入必要的依赖: ```javascript import { Chart } from '@antv/g2'; import { Gradient } from '@antv/g2/lib/util/color'; ``` 然后,创建一个 Chart 实例并定义数据源: ```javascript const chart = new Chart({ container: 'container', autoFit: true, }); const data = [ { value: 0.2 }, { value: 0.4 }, { value: 0.6 }, { value: 0.8 }, { value: 1 }, ]; ``` 接下来,定义一个自定义渲染函数并将其传递给 G2 的 background 方法: ```javascript chart.background((chart) => { const canvas = chart.get('canvas'); const context = canvas.get('context'); // 创建渐变色对象 const gradient = new Gradient(context, { colors: ['#0085FF', '#00FFA8'], gradient: 'linear', direction: [0, 0, 0, 1], }); // 绘制水波纹背景 const width = canvas.get('width'); const height = canvas.get('height'); const cx = width / 2; const cy = height / 2; const radius = Math.min(width, height) / 2; const lineWidth = 2; const amplitude = 10; const waveLength = 300; const phase = 0.5; const frequency = 2 * Math.PI / waveLength; const yOffset = cy + radius * (1 - 2 * data[0].value); for (let i = 0; i < 4; i++) { const alpha = (1 - i / 4) * 0.5; context.beginPath(); context.strokeStyle = gradient.at(i / 4); context.globalAlpha = alpha; context.lineWidth = lineWidth; for (let x = 0; x < width; x += 20) { const y = amplitude * Math.sin(frequency * x + phase * i) + yOffset; if (x === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } context.stroke(); } }); ``` 在这个渲染函数中,我们首先创建了一个渐变色对象,然后使用它来设置水波纹的颜色。接下来,我们根据数据源中的值来计算水波纹的振幅和相位,并使用 canvas API 绘制水波纹背景。 最后,调用 chart.render() 方法来渲染图表: ```javascript chart.render(); ``` 这样就可以将 antv/g2 水波纹背景设置渐变色了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光头程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值