ApexCharts YaxisBorder zindex（将 yaxisborder 移到标记后面）

Question

试图将 yaxis 边界保持在制造商后面，但似乎不起作用请帮忙

代码沙盒： https://codesandbox.io/s/apexcharts-forked-znw38y?file=/src/index.js

Answer 1

我认为你不能通过简单的配置来做到这一点（还）。 然而，ApexCharts 是基于 SVG 的，这意味着你可以操纵 DOM 来做你想做的事......

这里的问题与顺序很重要这一事实有关。 默认情况下，带有 class .apexcharts-inner的<g>元素（其中包含很多东西，包括标记）位于带有 class .apexcharts-yaxis yaxis 的<g>元素之前。 因此，轴出现在标记的顶部。 但是由于 JavaScript，我们可以更改顺序MutationObserver可用于监视 DOM 中的变化（因为，如果您调整图表大小，SVG 结构将发生变化）。 我已经多次使用这种技术。 但是请注意，这是非常实验性的。 它不在官方文档中。

所以...我们首先需要以下 function 将.apexcharts-yaxis yaxis 移动到.apexcharts-inner之前：

function reorderSvg() {
  var inner = document.querySelector('.apexcharts-inner'),
      yaxis = document.querySelector('.apexcharts-yaxis');
  
  inner.before(yaxis);
}

我们还将我们的MutationObserver放在与mounted事件相关的 function 中：

chart: {
  // ...
  events: {
    mounted: function () {
      var settings = { childList: true },
          observer = new MutationObserver(reorderSvg);

      reorderSvg();
      observer.observe(document.querySelector('#app'), settings);
    },
    // ...
  }
},

这是添加了这些小内容的代码：

 // ====================== HERE ========================= function reorderSvg() { var inner = document.querySelector(".apexcharts-inner"), yaxis = document.querySelector(".apexcharts-yaxis"); inner.before(yaxis); } // ================================================== var options = { chart: { fontFamily: "Lato", height: 400, type: "area", stacked: true, events: { // ====================== THERE ========================= mounted: function () { var settings = { childList: true }, observer = new MutationObserver(reorderSvg); reorderSvg(); observer.observe(document.querySelector("#app"), settings); }, // ================================================== selection: function (chart, e) { console.log(new Date(e.xaxis.min)); } } }, colors: ["#5D62B5", "#29C3BE", "#F2726F"], dataLabels: { enabled: false }, stroke: { curve: "smooth" }, marker: { show: true }, series: [ { name: "South", data: generateDayWiseTimeSeries( new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 60 } ) }, { name: "North", data: generateDayWiseTimeSeries( new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 20 } ) }, { name: "Central", data: generateDayWiseTimeSeries( new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 15 } ) } ], fill: { type: "gradient", gradient: { opacityFrom: 0.6, opacityTo: 0.8 } }, legend: { position: "top", horizontalAlign: "left" }, xaxis: { type: "datetime" }, grid: { show: true, yaxis: { lines: { show: false } } }, yaxis: { show: true, axisBorder: { show: true, opacityFrom: 1, opacityTo: 1 }, crosshairs: { show: true, position: "back", stroke: { color: "#b6b6b6", width: 1, dashArray: 0 } } }, markers: { size: 4, strokeColors: ["#EC3C07", "#04B96F", "#1881D0"], strokeWidth: 1, offsetX: 1, hover: { size: 5 }, shape: "circle" } }; var chart = new ApexCharts(document.querySelector("#app"), options); chart.render(); /* // this function will generate output in this format // data = [ [timestamp, 23], [timestamp, 33], [timestamp, 12]... ] */ function generateDayWiseTimeSeries(baseval, count, yrange) { var i = 0; var series = []; while (i < count) { var x = baseval; var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; series.push([x, y]); baseval += 86400000; i++; } return series; }

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