Блог

Я пытаюсь создать тепловую карту, используя диаграммы vue-apex. Я хотел бы использовать 3 цвета, как цветовую диаграмму тепла, основанную на ее значениях…

красный для маленьких, желтый для средних, зеленый для больших

я пытался использовать эти опции:

 chartOptions: {
  chart: {
    type: "heatmap",
        },
  colors: ["#F8696B", "#FEE683", "#63BE7B"]
  // also tried with this setting, but only change colors from row to column
  plotOptions: {
    heatmap: {
      distributed: true,
    },
  },
}
 

но не сработало так, как ожидалось, как вы можете видеть ниже:

ожидаемый результат будет таким:

Достичь желаемого результата с помощью этой библиотеки было бы довольно утомительно.

Вам нужно будет указать цветовой диапазон внутри массива heatmap.colorScale.ranges для каждого из промежуточных оттенков комбинации зеленого, желтого и красного, которые вы хотели бы видеть на своей тепловой карте.

Пример объекта цветовой гаммы в массиве диапазонов:

 {
  from: -30,
  to: 5,
  color: '#00A100',
  name: 'low',
}
 

Если вы посмотрите на примеры на веб-сайте, вы увидите, что нет примера, когда несколько цветов смешиваются на промежуточных этапах в тепловой карте только в одной категории/серии. Там, где есть несколько цветов, они применяются отдельно к каждой серии, поэтому у вас есть разные оттенки одного и того же цвета по горизонтали, но по вертикали цвета просто чередуются с предоставленными цветами или цветами по умолчанию:

• https://apexcharts.com/vue-chart-demos/heatmap-charts/

Для одной серии данных существует либо несколько оттенков только одного цвета, либо дискретный набор цветовых диапазонов.

Вы можете либо выписать большое количество цветовых диапазонов с конкретными оттенками, которые вы хотели бы видеть, либо, возможно, использовать указание одного цвета, как в этом примере на официальном сайте:

• https://apexcharts.com/vue-chart-demos/heatmap-charts/basic/

Вы, вероятно, захотите установить красный цвет, чтобы у вас были оттенки между белым и красным.