Chartjs градиентный цвет фона на основе минимальных и максимальных значений


Chartjs градиентный цвет фона на основе минимальных и максимальных значений

02.12.2020 10:34:21 Просмотров 53 Источник

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

График имеет динамические минимальные и максимальные значения, но он не может быть меньше 0 и больше 5. аналогично 5-звездочному рейтингу.

Чтобы показать различия в отображаемых данных, я не фиксирую график min/max от 0 до 5.

В настоящее время это код для отображения моей диаграммы:

Опции:

  • min составляет -0,2 от минимального значения, но не менее 0;

  • Макс составляет +0,2 от максимального значения, но не более 5;

    return {
      legend: {
        display: false
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
              min,
              max,
              stepSize: 0.5
            }
          }
        ]
      }
    }
    

Панель "данные диаграммы" :

  return {
    labels: this.labels,
    datasets: [
      {
        label: 'Evaluation',
        data: [
          this.photo.composition,
          this.photo.technique,
          this.photo.creativity,
          this.photo.content,
          this.photo.lighting
        ],
        borderWidth: 1
      }
    ]
  }

Визуализация диаграммы:

  const gradient = this.$refs.canvas
    .getContext('2d')
    .createLinearGradient(0, 300, 0, 0)
  gradient.addColorStop(0, '#FF5722')
  gradient.addColorStop(0.5, '#FFC107')
  gradient.addColorStop(1, '#8BC34A')

  this.data.datasets[0].backgroundColor = gradient
  this.renderChart(this.data, this.options)

Результат довольно близок к тому, что я ищу:

enter image description here

К сожалению, то, что я хотел бы видеть, - это красный цвет на 0 и зеленый на 5, поэтому градиент не должен достигать зеленого, если максимальное значение равно 2,5 (здесь я ожидал бы оранжевого), и то же самое для более низких значений... Надеюсь, в этом есть смысл. Может ли кто-нибудь указать мне правильное направление? Спасибо!

У вопроса есть решение - Посмотреть?

Ответы - Chartjs градиентный цвет фона на основе минимальных и максимальных значений / Chartjs gradient background color based on min and max values

Является ответом!
uminder

03.12.2020 08:10:01

Основной API плагина предлагает ряд крючков, которые могут быть использованы для выполнения пользовательского кода. Вы можете использовать крючок afterLayout для создания градиента для оси y, который распространяет эту желаемую область (значения от 0 до 5).

let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let yTop = yAxis.getPixelForValue(5);          
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);  

Пожалуйста, взгляните на приведенный ниже образец и посмотрите, как он работает.

const data = [2, 2.25, 3.3];

new Chart(document.getElementById("chart"), {
  type: "bar",
  plugins: [{
    afterLayout: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let yAxis = chart.scales["y-axis-0"];
      let yBottom = yAxis.getPixelForValue(0);
      let yTop = yAxis.getPixelForValue(5);          
      let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);   
      gradient.addColorStop(0, '#FF5722');           
      gradient.addColorStop(0.5, '#FFC107'); 
      gradient.addColorStop(1, '#8BC34A');           
      chart.data.datasets[0].backgroundColor = gradient;
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
      label: "Evaluation",
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: Math.min(...data) - 0.2,
          max: Math.max(...data) + 0.2,
          stepSize: 0.5
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Помочь в развитии проекта:
Закрыть X