ApexChart 热图 lerp 两种颜色之间

Question

我正在尝试使用 ApexChart Heatmap 制作类似于 GitHub 贡献图的热图。但是，随着值变高，我想从灰色变为蓝色。我还想限制颜色范围，以便在贡献一定数量后，无论如何它都是相同的颜色。如果低值看起来不像 0，那就太好了（因为一些贡献仍然远大于 0）。但是我无法这样做。欢迎任何帮助。我无法使用

colorScale:

做到这一点，但这可能只是一个技能问题。这是我的图表选项：

 const chartOptions = {
    chart: {
      type: "heatmap",
      animations: {
        enabled: false,
      },
      redrawOnWindowResize: false,
      selection: {
        enabled: false,
      },
    },

    plotOptions: {
      heatmap: {
        radius: 5,
      },
    },
    dataLabels: {
      enabled: false
    },

    colors: ["#008FFB"],
    stroke: {
      colors: ["#D3D3D3"],
      width: 2,
    },
    title: {
      text: "User Contributions",
    },

    xaxis: {
      type: "datetime",
      labels: {
        format: "MMM",
        showDuplicates: false,
      },
    },
  };

...

return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={chartOptions}
          series={chartData}
          type="heatmap"
          height={280}
          width={1200}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );

这是结果：

Answer 1

您需要添加一个范围，如下所示：

 plotOptions: {
      heatmap: {
        colorScale: {
          ranges: [
            { from: 0, to: 1,  color: "#ffffff" },
            { from: 1, to: 2, color: "#ece7fc" },
            { from: 2, to: 3, color: "#dacff8" },
            { from: 3, to: 4, color: "#c6b8f5" },
            { from: 4, to: 5,  color: "#b2a1f1" },
            { from: 5, to: 6,  color: "#9c8bed" },
            { from: 6, to: 7, color: "#8575e8" },
            { from: 7, to: 8,  color: "#6a5fe4" },
            { from: 8, to: 9, color: "#494adf" },
            { from: 9, to: 10,  color: "#0036da" },
          ],
          min: 0,
          max: 10,
        },
      },
    },

通过这种方式，您将能够控制颜色，并且还能够将颜色限制在一定的贡献值。