React中ApexCharts热力图y=0值自定义颜色设置问题

我在React项目中使用ApexCharts集成热力图时遇到问题：当数据的Y值为0时，图表会默认应用rgba(255, 255, 255, 1)颜色，我想要给所有y=0的点设置特定颜色优化外观，但尝试几种方法后仍未解决。

相关代码 #

React组件代码 #

/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from "react";
import ReactApexChart from "react-apexcharts";
import data from "./data.json"; // Adjust path as per your file location
import client from "../../../services/graphql/apollo";
import { getVehicleHourlyAnalyticsListQuery } from "../../../services/graphql/queries";

const HeatMapChart = () => {
  const [chartData, setChartData] = useState({
    series: [],
    options: {
      chart: {
        height: 350,
        type: "heatmap",
      },
      dataLabels: {
        enabled: false,
      },
      colors: ["#008FFB"],
      title: {
        text: "HeatMap Chart (Single color)",
      },
      xaxis: {
        categories: [], // This will be populated with time ranges (e.g., "0:00 - 1:00")
      },
      yaxis: {
        categories: [], // This will be populated with days (e.g., "Monday", "Tuesday")
      },
      tooltip: {
        enabled: true,
        enabledOnSeries: undefined,
        shared: true,
        followCursor: true,
        intersect: false,
        inverseOrder: false,
        custom: undefined,
        fillSeriesColor: false,
        theme: "light",
        style: {
          fontSize: "12px",
          fontFamily: undefined,
        },
        formatter: undefined,
        offsetX: 0,
        offsetY: 0,
        format: {
          title: function (val) {
            return val;
          },
          formatter: function (val) {
            return val;
          },
        },
        items: {
          display: "flex",
          fontFamily: undefined,
          padding: "5px 10px",
        },
        fixed: {
          enabled: false,
          position: "topRight",
          offsetX: 0,
          offsetY: 0,
        },
      },
    },
  });

  useEffect(() => {
    // Format the data for ApexCharts
    const formattedSeries = data.map((dayData) => ({
      name: dayData.name,
      data: dayData.data.map((timeData) => ({
        x: timeData.x,
        y: timeData.y,
      })),
    }));

    const categoriesX = data[0].data.map((timeData) => timeData.x); // Assuming all days have the same time ranges
    const categoriesY = data.map((dayData) => dayData.name);

    setChartData({
      series: formattedSeries,
      options: {
        ...chartData.options,
        xaxis: {
          ...chartData.options.xaxis,
          categories: categoriesX,
        },
        yaxis: {
          ...chartData.options.yaxis,
          categories: categoriesY,
        },
      },
    });
  }, []); // Empty dependency array means this effect runs once after initial render

  console.log("chartData.series::", chartData.series);

  return (
    <div>
      <div id="chart">
        <ReactApexChart  options={chartData.options} series={chartData.series} type="heatmap" height={350} />
      </div>
      {/* <div id="html-dist"></div> */}
    </div>
  );
};

export default HeatMapChart;

data.json数据 #

[
  {
    "name": "Saturday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 2
      }
    ]
  },
  {
    "name": "Sunday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 0
      }
    ]
  },
  {
    "name": "Monday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 1
      }
    ]
  },
  {
    "name": "Thursday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 0
      }
    ]
  },
  {
    "name": "Tuesday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 1
      }
    ]
  },
  {
    "name": "Friday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 2
      }
    ]
  },
  {
    "name": "Wednesday",
    "data": [
      {
        "x": "0:00 - 1:00",
        "y": 0
      },
      {
        "x": "1:00 - 2:00",
        "y": 0
      }
    ]
  }
]

已尝试的方案 #

• 在colors选项中添加默认颜色
• 尝试在数据处理时给y === 0的项设置color:red

解决方案 #

方法1：通过颜色区间配置映射值与颜色 #

利用ApexCharts热力图的colorScale功能，将0单独划分为一个区间并指定颜色，修改options配置：

options: {
  // ... 原有配置
  plotOptions: {
    heatmap: {
      colorScale: {
        ranges: [
          {
            from: 0,
            to: 0,
            color: '#FF6B6B' // 自定义y=0的颜色
          },
          {
            from: 1,
            to: 2,
            color: '#008FFB' // 非0值的原有颜色
          }
        ]
      }
    }
  },
  // ... 原有配置
}

方法2：在数据项中直接指定填充色 #

格式化数据时，给y=0的项添加fillColor属性，优先级高于全局颜色配置：

const formattedSeries = data.map((dayData) => ({
  name: dayData.name,
  data: dayData.data.map((timeData) => ({
    x: timeData.x,
    y: timeData.y,
    fillColor: timeData.y === 0 ? '#FF6B6B' : '#008FFB'
  })),
}));

注意事项 #

• 使用颜色区间时，需覆盖所有可能的数值范围，避免出现未匹配的默认颜色
• 数据项的fillColor优先级高于全局colors和colorScale配置

内容的提问来源于stack exchange，提问作者Monu Kumar