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>