组图表 js 中每个单条的水平渐变

Question

我希望每个组栏中的第一个项目具有相同的渐变

我只能设置第一组的第一项的渐变色

注意：我可以实现垂直渐变，但是如何为每个组的第一个项目提供水平渐变背景渐变

============================================= ===================================

这是我的代码

 window.onload = function () {
         var ctx = document.getElementById("canvas").getContext("2d");
         // var angle = 45 * Math.PI / 180;
         // var  x2 = 300 * Math.cos(angle);
         // var y2 = 300 * Math.sin(angle);
         var background_1 = ctx.createLinearGradient(0, 0, 150, 0);
         background_1.addColorStop(0, '#005AB1');
         background_1.addColorStop(0.35, '#4F8ED0');
         background_1.addColorStop(0.55, '#BED0F9');
         background_1.addColorStop(0.70, '#AEC9EF');
         background_1.addColorStop(1, '#0069B9');
         
         window.myBar = new Chart(ctx, {
            type: "bar",
            data: {
               labels: [
                  ["", "  + ", "(n = 475)"],
                  ["","+ ","(n = 325)"],
                  ["","+ ","(n = 475)"]
               ],
               datasets: [
                  {
                     label: "American Express",
                     backgroundColor: [background_1],
                     borderColor: "#005AB1",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [77, 66, 81]

                  },
                  {
                     label: "Mastercard",
                     backgroundColor: "#DDD2BC",
                     borderColor: "#DDD2BC",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [71, 31, 78]
                  },
                  {
                     label: "Paypal",
                     backgroundColor: "#C1C1C0",
                     borderColor: "#C1C1C0",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [50, 38, 71]
                  }
               ]
            },
            options: {
               responsive: true,
               legend: {
                  position: "top"
               },
               title: {
                  display: true,
                  text: "Chart.js Bar Chart"
               }
            },
            //          plugins: [{
            //          beforeInit: function(chart) {
            //             chart.data.labels.forEach(function(e, i, a) {
            //                if (/\n/.test(e)) {
            //                   a[i] = e.split(/\n/);
            //                }
            //             });
            //    }
            // }]
         });
      };

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>

   <div id="container"
        style="width: 100%;">
      <canvas id="canvas"></canvas>
   </div>

   <!-- script -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>

Answer 1

您将需要使用可编写脚本的函数，在其中传递正确的开始和结束 x 值：

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");

  window.myBar = new Chart(ctx, {
    type: "bar",
    data: {
      labels: [
        ["", "  + ", "(n = 475)"],
        ["", "+ ", "(n = 325)"],
        ["", "+ ", "(n = 475)"]
      ],
      datasets: [{
          label: "American Express",
          backgroundColor: (context) => {
            if (!context.element.x || !context.element.width) {
              return
            }

            const {
              ctx
            } = context.chart;

            const {
              x,
              width
            } = context.element;

            const background_1 = ctx.createLinearGradient(x - (width / 2), 0, x + (width / 2), 0);

            background_1.addColorStop(0, '#005AB1');
            background_1.addColorStop(0.35, '#4F8ED0');
            background_1.addColorStop(0.55, '#BED0F9');
            background_1.addColorStop(0.70, '#AEC9EF');
            background_1.addColorStop(1, '#0069B9');

            return background_1;
          },
          borderColor: "#005AB1",
          borderWidth: 1,
          borderRadius: 15,
          data: [77, 66, 81]

        },
        {
          label: "Mastercard",
          backgroundColor: "#DDD2BC",
          borderColor: "#DDD2BC",
          borderWidth: 1,
          borderRadius: 15,
          data: [71, 31, 78]
        },
        {
          label: "Paypal",
          backgroundColor: "#C1C1C0",
          borderColor: "#C1C1C0",
          borderWidth: 1,
          borderRadius: 15,
          data: [50, 38, 71]
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: "top"
        },
        title: {
          display: true,
          text: "Chart.js Bar Chart"
        }
      }
    },
  });
};

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>

<body>

  <div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
  </div>

  <!-- script -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>

组图表 js 中每个单条的水平渐变

Horizontal gradient for every single bar in group chart js

javascript

charts

bar-chart

html5-canvas

chart.js