在 RGB 颜色上创建图案

Question

我目前正在使用 Apexcharts to display a data series. In one of the options, I can select an array of colors as defined in the documentation，它是一个字符串数组。显然，传入十六进制字符串就可以了。

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

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

编辑：

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

因此，结果将类似于：

编辑2：

我还看到了另一个问题，我们可以指定属性 fillColor 来指定给定条的颜色。是否有等效于显式设置渐变？

Answer 1

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

第 1 部分

In a multi-series chart, you can pass an array to allow a combination of fill types like this:
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 和 fill.gradient.gradientToColors 中（您需要两个不同的数组因为渐变从“开始”颜色过渡到不同的“结束”颜色。）

gradientToColors: Array

Optional colors that ends the gradient to. The main colors array becomes the gradientFromColors and this array becomes the end colors of the gradient. Each index in the array corresponds to the series-index.

以上是如何指定的说明：

每个系列中所有值的填充类型（纯色、渐变、图案、图像）。（来自 linked example 的两个系列是蓝色 'Bob' 和绿色 'Joe'。）
当填充类型为渐变时：系列中每个值的 start/end 颜色。（蓝色系列 'Bob' 的三个不同值是“3 天”、“3 天”和“5 天”。）

问题不明确，可能要求其他内容（ApexCharts 甚至可能不支持。）如果以上没有回答问题，我建议添加所需图表输出的样本模型图像.

更新：如何改变图案（'gradient'和'pattern'是两种不同类型的填充：slantedLines是一种图案，不是渐变。）

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

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

Modified code sandbox:

在 RGB 颜色上创建图案

Create Pattern on RGB Colors

javascript

css

apexcharts

第 1 部分

第 2 部分