组图中每个条形条的水平梯度JS

发布于 2025-02-02 17:45:11 字数 1205 浏览 3 评论 0原文

我想要每个组条中的第一项相同的梯度

我只能设置第一组的第一个项目渐变颜色。

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

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

这是我的代码

 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: [
                  ["

原文

I want the same gradient for the first item in the every group bar

I can set only the first group's first item gradient color.

Note: I can achieve a vertical gradient but how can give horizontal gradient background gradient for every group's first item

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

Here is my code

 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小苏打饼 2025-02-09 17:45:11

您将需要使用一个可脚本的函数，在该功能中，您可以通过正确的启动和结束x值：

window.onload = function() {

  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {

    type: "bar",

    data: {

      labels: [

        ["

You will need to use a scriptable function in which you pass the correct start and end x values:

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>

回复收藏 0 原文

~没有更多了~