chart.js - 我们如何在图表 js 中制作带有组的堆叠条形图，以便为多个数据集组合颜色/渐变？

问题描述

我们如何在图表 js 中制作带有组的堆叠条形图，以便为多个数据集组合颜色/渐变？

这张照片解释了我正在尝试做的事情......

所以有两个数据集，一个用于开放票，另一个用于关闭票。我想像图片中那样制作颜色渐变。

这是我到目前为止所做的

const primaryColor = "#9CA3AF";
const primaryColorRGB = 'rgb(66, 199, 241)';
const grayColor = "#9CA3AF";

function maxValue(arr) {
  let max = arr[0];

  for (let val of arr) {
    if (val > max) {
      max = val;
    }
  }
  return max;
}

function getMaxValue(array) {
  var max = maxValue(array);
  if (max <= 1000) {
    return max + 300;
  } else if (max >= 1000 && max < 2000) {
    return max + 500;
  } else if (max >= 2000 && max < 3000) {
    return max + 700;
  } else if (max >= 3000 && max < 5000) {
    return max + 900;
  } else {
    return max + 1000;
  }
}

var ctx = document.getElementById("ticketsChart").getContext("2d");
var openTicketeGradiunt = ctx.createLinearGradient(0, 0, 0, 200);
openTicketeGradiunt.addColorStop(1, primaryColorRGB);

var closedTickets = ctx.createLinearGradient(0, 0, 0, 100);
closedTickets.addColorStop(1, grayColor);
console.log('ye');


const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Oct', 'Nov', 'Dec'],
  datasets: [{
      label: 'Open Tickets',
      data: [8, 2, 3, 4, 15, 6, 7, 8, 9, 2, 11, 5],
      backgroundColor: openTicketeGradiunt,
      barThickness: 24,

    },
    {
      label: 'Closed Tickets',
      data: [0, 0, 12, 1, 2, 0, 0, 0, 0, 0, 1, 12],
      backgroundColor: closedTickets,
      barThickness: 24,
    }
  ]
};

const ticketsChartConfig = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
      legend: {
        position: "bottom",
        labels: {
          usePointStyle: true,
          padding: 23,
        },
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    },
  }
};

// ticketsChart
var elm = document.getElementById('ticketsChart');
var currentProjectsChart = new Chart(elm, ticketsChartConfig);

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

  <div style="position: relative;">
    <canvas width="400" id="ticketsChart"></canvas>
  </div>

  <script src="./main.js"></script>

</body>

</html>

标签： chart.js

chart.js - 我们如何在图表 js 中制作带有组的堆叠条形图，以便为多个数据集组合颜色/渐变？

问题描述

解决方案

推荐阅读