将 Apexcharts.js 启动 Animation 从下到上更改为左右

Question

是否可以在启动图表时将 Apexcharts.js 上的折线图 animation从下到上更改为左右？

<div id="chart">
</div>

#chart {
  max-width: 650px;
}

var options = {
 
  chart: {
    height: 380,
    type: "line",
    id: "areachart-2"
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: "straight"
  },
  series: [
    {
      data: series.monthDataSeries1.prices
    }
  ],
  labels: series.monthDataSeries1.dates,
  xaxis: {
    type: "datetime",
    labels: {
      rotate: 0,
      formatter: function(val) {
        return dayjs(val).format('MMM YYYY')
      }
    },
    tooltip: {
      formatter: function(val) {
        return dayjs(val).format('MMM YYYY')
      }
    }
  },
  tooltip: {
    x: {
      formatter: function(val) {
        return dayjs(val).format('MMM DD, YYYY');
      }
    }
  }
};

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

chart.render();

Answer 1

 var totalIncident = [151, 169, 311, 614, 840]; var ransomDemands = [18, 60, 150, 383, 555]; var forensicsCosts = [24, 33, 58, 109, 103]; var xCat = ['2017', '2018', '2019', '2020', '2021']; var defaultValues = new Array(totalIncident.length).fill(null); var totalIncidentD = [...defaultValues] var ransomDemandsD = [...defaultValues] var forensicsCostsD = [...defaultValues] var options = { series: [{ name: "Total Incident Costs", data: defaultValues }, { name: "Ransom Demands", data: defaultValues }, { name: "Forensics Costs", data: defaultValues }], colors: ['#A0CEE8', '#4060AC', '#EC6058'], chart: { height: 500, width: 1200, type: 'line', zoom: { enabled: false }, fontFamily: 'Raleway, sans-serif', animations: { speed: 13000, easing: 'linear', dynamicAnimation: { speed: 1000 } } }, dataLabels: { enabled: true, formatter: function (val, opt) { if (val === null) return; return val + "K" }, }, stroke: { curve: 'straight' }, title: { text: 'Ransomware', align: 'center' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 }, }, xaxis: { type: 'category', tickPlacement: 'between', categories: xCat, }, yaxis: { min: 0, max: 1000, labels: { formatter: function (value) { return value + "K"; } }, } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); var i = 0; var dataInterval = setInterval(function () { totalIncidentD[i] = totalIncident[i]; ransomDemandsD[i] = ransomDemands[i]; forensicsCostsD[i] = forensicsCosts[i]; chart.updateSeries([{ name: "Total Incident Costs", data: totalIncidentD }, { name: "Ransom Demands", data: ransomDemandsD }, { name: "Forensics Costs", data: forensicsCostsD }]) i = i + 1; if (i === xCat.length) clearInterval(dataInterval) }, 1000)

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <style>:apexcharts-canvas { margin; auto: } </style> </head> <body> <div id="chart"></div> </body> <script src="https.//cdn.jsdelivr.net/npm/apexcharts"></script> </html>

将 Apexcharts.js 启动 Animation 从下到上更改为左右

问题描述

1 个解决方案

解决方案1
0 2023-01-24 04:41:56

将 Apexcharts.js 启动 Animation 从下到上更改为左右

问题描述

1 个解决方案

解决方案1 0 2023-01-24 04:41:56

解决方案1
0 2023-01-24 04:41:56