reactjs - 如何在具有条件的 Apex 图表中使用不同的颜色？

Question

我正在使用 Apexcharts treemap chart并想应用不同的颜色。

如果类型数据是“a”类型，我想要它是一种颜色，如果它是“b”类型，我想要另一种颜色。

我的数据:

    const TreeData = [
          {
            data: [
              {
                x: 'Product 1',
                y: 218,
                type:'a'
              },
              {
                x: 'Product 2',
                y: 149,
                type:'b'
              }]
    

我试过这样的:

    colors: [function({ value, seriesIndex, w }) {
        if (value < 55) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }, function({ value, seriesIndex, w }) {
        if (value < 111) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }]
    

但我无法在上述函数中获取类型值。

如何使用不同的颜色？

Answer 1

要为 TreeMap 中的每个单元格使用不同的颜色，您可以在系列本身中应用 fillColor。

series: [
  {
    data: [
      {
        x: 'New Delhi',
        y: 218,
        fillColor: '#3396F7'
      },
      {
        x: 'Kolkata',
        y: 149,
        fillColor: '#EC4498'
      },
      {
        x: 'Mumbai',
        y: 184,
        fillColor: '#61CF35'
      }
    ]
  }
]