AG Charts：如何为面积图填充应用线性渐变？

可以实现，AG Charts支持通过配置系列的fill属性定义线性渐变，以下是可直接运行的React组件示例：

import { AgChartsReact } from 'ag-charts-react';

const App = () => {
  const options = {
    data: [
      { month: 'Jan', value: 50 },
      { month: 'Feb', value: 70 },
      { month: 'Mar', value: 60 },
      { month: 'Apr', value: 80 },
      { month: 'May', value: 90 },
    ],
    series: [
      {
        type: 'area',
        xKey: 'month',
        yKey: 'value',
        fill: {
          gradient: {
            type: 'linear',
            rotation: 90, // 控制渐变方向，90度为垂直渐变（从下到上）
            stops: [
              { offset: 0, color: 'rgba(52, 152, 219, 0.8)' },
              { offset: 1, color: 'rgba(52, 152, 219, 0.1)' },
            ],
          },
        },
      },
    ],
    axes: [
      { type: 'category', position: 'bottom' },
      { type: 'number', position: 'left' },
    ],
  };

  return <AgChartsReact options={options} />;
};

export default App;

关键配置说明 #

• gradient.type: 设置为'linear'指定线性渐变类型
• rotation: 控制渐变方向，0度为水平渐变（从左到右），90度为垂直渐变（从下到上），支持任意角度值
• stops: 定义渐变颜色节点，每个节点包含offset（0-1之间的数值，对应渐变位置）和color（支持RGB/RGBA/十六进制颜色）

常见失效原因排查 #

• 版本兼容：确保使用AG Charts React v8.0及以上版本，早期版本对渐变支持有限
• 配置层级错误：fill.gradient必须直接挂载在系列（series）配置下，而非全局样式或其他层级
• 颜色格式错误：避免使用不支持的颜色格式，推荐用RGBA实现透明渐变效果

内容的提问来源于stack exchange，提问作者Nicholas Brown