Javascript 任何可以按对象值填充区域的图表库

举个例子，我有一个简单的由recharts驱动的面积图

const data = [
  {
    uv: 200,
    veracity: 'low',
  },
  {
    uv: 300,
    veracity: 'medium',
  }
];

<AreaChart data={data}>
 <Area
  type='monotone'
  dataKey='uv'
  stroke='#8884d8'
  fill='black'
  />
</AreaChart>

我想用数据obj中的准确性值填充区域。例如，我希望它能像这样工作

fill={props=>props.veracity=='low'？'black'：'white'}

具有类似的示例，但区域颜色是按值更改的，而不是按数据对象中的其他键更改的。我在github上发现了几个类似的问题，但没有人给出答案

我想达到这样的结果

---

提供的文档中的示例是一个巧妙的破解，它使用CSS线性渐变，根据y轴值是否高于或低于值0，有效地充当绿色或红色之间的二进制选择器。不幸的是，Recharts没有提供一种指定自定义填充函数的方法，该函数将自动处理该区域的这些颜色变化。此外，Recharts似乎不支持将数据分割成多个可以单独着色的微小区域的方法，这将通过分割数据集来实现此功能的编程

查看其他可视化库，其中一些库似乎缺乏对此类功能的支持

替代图书馆 大多数库似乎无法动态拆分和设置特定的填充颜色。如果库支持多个数据系列，可以通过将原始数据集拆分为具有相同颜色的分区来实现。要实现这一点，首先对数据进行排序，然后根据其派生/计算的填充值将数据点拆分为单独的数据系列

对于未来的读者，我之所以建议另一个图书馆，是因为这篇文章的作者悬赏如下：

我准备更改库，如果它有能力任意绘制区域

ApexCharts.js开源 允许使用样条曲线面积图可视化指定具有不同填充的多个数据系列。请参阅文档中的此演示：

作为概念证明，我起草了一个实现，根据派生颜色将数据集划分为多个系列：

每次随机生成数据集；以下是一个预览示例：

画布免费供非商业用途或学生使用 还支持一个，支持多个数据系列。源于此，下面是一个JSFIDLE，它使用多个数据系列展示了此功能：

---

请注意，此库绑定到一个DOM元素，该元素应在上进行渲染。

谢谢，时间表可以按我的要求工作，但需要花钱。也许有免费的类似物？@A.Burdonskaya来澄清-CanvasJS是用于非商业或学术项目的。您的项目是否满足这些要求？如果没有，我将研究另一个替代方案。@A.Burdonskaya我已经更新了我的答案，使用ApexCharts.js引用了一个免费的开源替代方案。此演示中的填充不透明度降低，但可以修改为实心填充。您将需要基于派生数据的填充颜色使用相同的数据分区方案。对不起，这是一个商业项目，我不能使用免费许可证。。。关于阿佩克斯卡特-这是非常接近我想要的，但仍然不是。我附上一张图片和一个例子来回答这个问题，请看一看你救了我！非常感谢你