时间戳

首页 > 解决方案 > ApexCharts 系列上的可变模式

css - ApexCharts 系列上的可变模式

问题描述

我目前有一个类似于此Apexcharts 示例的工作多系列。在本系列中，我使用该colors函数根据特定条件指定特定颜色。例如，如本例所示，我可以这样做：

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

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

Apexcharts 可以做到这一点吗？即，是否有一个功能可以让我根据 seriesIndex 创建条件来创建不同的模式？最终，我想为某些数据创建某种视觉差异（不是颜色，而是更多的图案/渐变），以便某些数据很容易与其他数据区分开来。最好的方法是什么？

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

标签： cssreactjsapexcharts

解决方案

该属性内置了一种可能性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 （在示例中，我为不同系列使用了多种填充类型 - 这也是可能的）

推荐阅读