javascript - 在 RGB 颜色上创建图案

Question

我目前正在使用Apexcharts来显示数据系列。在其中一个选项中，我可以选择文档中定义的颜色数组，这是一个字符串数组。显然，传入十六进制字符串就可以了。

但是，我现在要做的是让我的数据系列在我的图表上显示模式。我知道我可以使用此处fill定义的对象，但这将为整个图形定义一个模式，而我只想为某些数据定义它。

由于color数组是一个字符串数组，有没有一种方法可以定义类似linear-gradient或等效的东西，但以字符串格式？

编辑：

例如，假设我有来自 Apexchart 网站的这个数据系列。有没有一种方法可以设置条件，比如这个人是“Joe”并且类型是“test”，然后将渐变设置为某种东西（例如gradient: slantedLines）？

因此，结果将类似于：

编辑2：

我还看到了另一个问题，我们可以在这篇文章fillColor中指定属性来指定给定条的颜色。是否有明确设置渐变的等价物？

标签： javascriptcssapexcharts

Answer 1

这个问题需要澄清一下，但这似乎是最合乎逻辑的答案：

第1部分

在多系列图表中，您可以传递一个数组以允许组合填充类型，如下所示：

fill: {
  // All series use same type: gradient.
  type: 'gradient'  
}
/* OR */
fill: {
  // Series alternate between solid type and gradient type.
  type: ['solid', 'gradient']  
}

第2部分

然后，如果您希望每个渐变使用不同的颜色，请将它们作为数组传递给fill.colors and fill.gradient.gradientToColors（您需要两个不同的数组，因为渐变从“开始”颜色过渡到不同的“结束”颜色。）

gradientToColors: Array

结束渐变的可选颜色。主颜色数组变成了 gradientFromColors，这个数组变成了渐变的结束颜色。数组中的每个索引对应于系列索引。

以上是如何指定的说明：

1. 每个系列中所有值的填充类型（实心、渐变、图案、图像）。（链接示例中的两个系列是蓝色的“Bob”和绿色的“Joe”。）
2. 当填充类型为渐变时：系列中每个值的开始/结束颜色。（蓝色系列“Bob”的三个不同值是“3 天”、“3 天”和“5 天”。）

这个问题是模棱两可的，可能要求别的东西（ApexCharts 甚至可能不支持。）如果上面没有回答这个问题，我建议添加所需图表输出的示例模型图像。

更新：如何更改图案（“渐变”和“图案”是两种不同类型的填充：slantedLines是图案，而不是渐变。）

以下选项导致第二个和第三个值使用模式（它不会像我假设的那样重复）。

...
...
fill: {
    type: ["solid", "pattern", "pattern"],
    pattern: {
        style: "slantedLines"
    }
}
...
...

修改代码沙箱：