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

Question

使用顶点图表

我的代码 - 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' - 但它不起作用

我试着按照图片做

在此先感谢您的帮助

Answer 1

如果您查看文档，没有 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

Answer 2

How to add background color for Apexcharts y-axis?

您可以添加播放 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>

Answer 3

我刚刚使用 inspect 并找到了 yaxis("apexcharts-yaxis-texts-g") 的 svg class 并附加在其中，在尝试了一些值之后制作了一个矩形，它会稍微覆盖 y-轴使其看起来像背景。

这可能对你有用。

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

只要 window 的尺寸发生变化（当我们清除超时）时，这个 500 毫秒的计数器就会重新启动，因此只有在用户停止调整 [=28] 的大小时才会调用该函数=] 或者如果用户调整 window 的大小非常缓慢，这通常不会发生。

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

Answer 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>

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

How to add background color for apexcharts y-axis?

javascript

html

css

svg

apexcharts

这可能对你有用。