如何为 apexcharts y 轴添加背景颜色？答案

【问题标题】：How to add background color for apexcharts y-axis?如何为 apexcharts y 轴添加背景颜色？
【发布时间】：2021-05-06 07:44:07
【问题描述】：

使用顶点图表

我的代码 - Fiddle

var options = {
  series: [{
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43]
  }, {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27]
  }, {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14]
  }, {
    name: 'PRODUCT D',
    data: [21, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: false,
    },
  },
  xaxis: {
    type: 'datetime',
    categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
      '01/05/2011 GMT', '01/06/2011 GMT'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
        },
      },
   },
  
  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

添加yaxis labels style - backgroundColor: '#e7e7e7' - 但它不起作用

我尝试按照图片中的方式进行操作

提前感谢您的帮助

【问题讨论】：

标签： javascript html css svg apexcharts

【解决方案1】：

如何为 Apexcharts y 轴添加背景颜色？

您可以添加使用 javascript 和 SVG Apexcharts 制作的背景。

您可以通过querySelector 访问他们创建的 SVG，然后添加您可以想到的元素或其他技巧，使其按您想要的方式进行。

这让您非常灵活，可以完全按照自己的意愿行事。

   var options = {
    series: [
      {
        name: 'PRODUCT A',
        data: [44, 55, 41, 67, 22, 43]
      },
      {
        name: 'PRODUCT B',
        data: [13, 23, 20, 8, 13, 27]
      },
      {
        name: 'PRODUCT C',
        data: [11, 17, 15, 15, 21, 14]
      },
      {
        name: 'PRODUCT D',
        data: [21, 7, 25, 13, 22, 8]
      }
    ],
    chart: {
      type: 'bar',
      height: 350,
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      },
      events: {
        mounted: function() {
          addYAxisBackground()
        },
        updated: function() {
          addYAxisBackground()
        }
      }
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: 'bottom',
            offsetX: -10,
            offsetY: 0
          }
        }
      }
    ],
    plotOptions: {
      bar: {
        borderRadius: 8,
        horizontal: false
      }
    },
    xaxis: {
      type: 'datetime',
      categories: [
        '01/01/2011 GMT',
        '01/02/2011 GMT',
        '01/03/2011 GMT',
        '01/04/2011 GMT',
        '01/05/2011 GMT',
        '01/06/2011 GMT'
      ]
    },
    yaxis: {
      labels: {
        style: {
          fontSize: '12px',
          fontWeight: 400,
          fontFamily: 'Open Sans',
          colors: ['#7286EA'],
          backgroundColor: '#e7e7e7'
        }
      }
    },

    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    }
  }

  var chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render()

  function addYAxisBackground() {
    var ctx = document.querySelector('svg'),
      textElm = ctx.querySelector('svg g'),
      SVGRect = textElm.getBBox()

    var rect = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'rect'
    )
    rect.setAttribute('x', SVGRect.x)
    rect.setAttribute('y', SVGRect.y)
    rect.setAttribute('width', '90px')
    rect.setAttribute('height', SVGRect.height + 20)
    rect.setAttribute('fill', 'yellow')
    ctx.insertBefore(rect, textElm)
  }

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

【讨论】：

【解决方案2】：

我刚刚使用了检查并找到了 yaxis("apexcharts-yaxis-texts-g") 的 svg 类并附加在其中，在尝试了一些值之后，创建了一个矩形，该矩形在某种程度上覆盖了 y 轴，使其看起来像一个背景。

这可能对你有用。

编辑：由于在调整窗口大小时动态附加元素，它会使该元素消失，为此我使用了 resize 事件，该事件会在 500 毫秒后触发一个函数来重新添加该元素。

只要窗口尺寸发生变化（因为我们清除超时），这个 500 毫秒的计数器就会重新启动，因此只有在用户停止调整窗口大小或用户非常缓慢地调整窗口大小时才会调用该函数不会正常发生。

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

var set = document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3.org/2000/svg", "rect");
node.setAttribute('height', '91%');
node.setAttribute('width', '5%');
node.setAttribute('fill', 'cyan');


set.insertBefore(node, set.childNodes[0]);

var func;

window.addEventListener("resize", function(){
  clearTimeout(func);
func = setTimeout(doneResizing, 500);
})

function doneResizing(){
var set=document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3.org/2000/svg","rect");
node.setAttribute('height','91%');
node.setAttribute('width','5%');
node.setAttribute('fill','cyan');


set.insertBefore(node, set.childNodes[0]);  
}

body {
  font-family: Roboto, sans-serif;
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">

【讨论】：

【解决方案3】：

如果您查看文档，则没有 backgroundColor 作为 yaxis.labels.style 的选项。 yaxis.labels.style 有以下选项：

{
  colors: [],
  fontSize: '12px',
  fontFamily: 'Helvetica, Arial, sans-serif',
  fontWeight: 400,
  cssClass: 'apexcharts-yaxis-label'
}

这里是文档：https://apexcharts.com/docs/options/yaxis/#formatter

【讨论】：

谢谢，所以不能这样做吗？
我不知道。我刚刚检查了文档并将其发布在这里。我会说，如果这是选项之一，他们会将其放入文档中。你应该等待其他答案。也许有人会知道更多。
我们不能在这里给cssClass添加一个额外的css类吗？

【解决方案4】：

这是一个使用 CSS 变量和背景的简单方法。

function updateBackground() {
  const chart = document.querySelector('.apexcharts-canvas');
  const yAxis = document.querySelector('.apexcharts-yaxis');
  const transform = yAxis.getAttribute('transform');
  const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
  
  const yAxisBBox = yAxis.getBBox();
  // console.log('yAxisBBox', yAxisBBox);
  
  chart.style.setProperty('--width', yAxisBBox.width + 'px');
  chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
}

var options = {
  series: [{
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43]
  }, {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27]
  }, {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14]
  }, {
    name: 'PRODUCT D',
    data: [21, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    },
    events: {
      /* run the function on mounted and updated hooks */
      mounted: updateBackground,
      updated: updateBackground
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: false,
    },
  },
  xaxis: {
    type: 'datetime',
    categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
      '01/05/2011 GMT', '01/06/2011 GMT'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
      },
    },
  },

  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

.apexcharts-canvas {
  --padding-x: 10px; /* you can change this by 0 or anything you want */
  background-image: linear-gradient(yellow, yellow);
  background-position: calc(var(--x) - var(--padding-x)) 0;
  background-size: calc(var(--width) + var(--padding-x) * 2) 100%;
  background-repeat: no-repeat;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

覆盖确切区域：

function updateBackground() {
  const chart = document.querySelector('.apexcharts-canvas');
  const yAxis = document.querySelector('.apexcharts-yaxis');
  const transform = yAxis.getAttribute('transform');
  const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
  
  const yAxisBBox = yAxis.getBBox();
  // console.log('yAxisBBox', yAxisBBox);
  
  chart.style.setProperty('--width', yAxisBBox.width + 'px');
  chart.style.setProperty('--height', yAxisBBox.height + 'px');
  chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
  chart.style.setProperty('--y', yAxisBBox.y + 'px');
}

var options = {
  series: [{
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43]
  }, {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27]
  }, {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14]
  }, {
    name: 'PRODUCT D',
    data: [21, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    },
    events: {
      /* run the function on mounted and updated hooks */
      mounted: updateBackground,
      updated: updateBackground
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: false,
    },
  },
  xaxis: {
    type: 'datetime',
    categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
      '01/05/2011 GMT', '01/06/2011 GMT'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
      },
    },
  },

  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

.apexcharts-canvas {
  background: linear-gradient(yellow, yellow) var(--x) var(--y) / var(--width) var(--height) no-repeat;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

【讨论】：