ApexCharts 系列上的可变模式

Question

我目前有一个与此类似的工作多系列Apexcharts example. Within this series, I am using the colors function to specify certain colors depending on certain conditions. For example, as shown in this example，我可以做到：

colors: [
  ({ seriesIndex }) => {
    // if one condition, return a color
    // else if another condition, return a different color
  }
]

我现在想做的是在数据系列中创建不同的模式，类似于如何使用颜色来创建不同的模式。我试图查看指定 here 的 fill 对象，但显然，这将在图表上的所有数据中创建一个标准模式。我想为特定数据指定 return 不同模式的条件（如 colors 函数）。

Apexcharts 可以吗？即，是否有允许我根据 seriesIndex 创建条件以创建不同模式的功能？最后，我想为某些数据创建某种视觉差异（不是在颜色方面，而是更多 patterns/gradients），以便某些数据很容易与其他数据区分开来。最好的方法是什么？

我曾尝试在 colors 中使用 linear-gradient，但我不确定是否可行。或者，我可以在图形选项中创建自定义 css 来满足此要求吗？

Answer 1

fill 属性内置了一种可能性，允许您为不同的系列设置不同的模式：

fill: {
  type: 'pattern',
  opacity: 1,
  pattern: {
    style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
  }
},

来源：https://apexcharts.com/vue-chart-demos/bar-charts/patterned/

工作示例： https://codesandbox.io/s/happy-stallman-ysyec?file=/src/App.js （在这个例子中，我为不同的系列使用了多种填充类型——这也是可能的）

ApexCharts 系列上的可变模式

Variable Pattern on ApexCharts Series

css

reactjs

apexcharts