Apexcharts 如何将 x 轴交换为 y 轴？

Question

我有折线图使用 Apexcharts 插件，我想交换位置 xAxis 到 yAxis 和 yAxis 到 xAxis。有人知道吗？，这是来自示例代码 Apexchart Line

 var options = {
        series: [{
          name: "Desktops",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
      }],
        chart: {
        height: 350,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      },

      annotations: {
          xaxis:[{
              x : 45,
              strokeDashArray: 0,
              borderColor: '#775DD0',
             label: {
                borderColor: '#775DD0',
                style: {
                    color: '#fff',
                    background: '#775DD0',
                },
                text: 'Anno Test',
                }
          }]

      }
      };

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

结果：

我想将 xAxis (Months) 交换为 yAxis ，并将 yAxis(number) 交换为 xAxis ，如下图所示：

Answer 1

这里是您如何实现您想要的目标的示例。您必须更改数据以满足您的需要。 many different ways 为 ApexCharts 提供数据。根据您从文档中复制的代码，我所做的只是试验 x 和 y 值并将类型更改为 type: scatter

let data = [];
let i = 0;
for (i = -10; i <= 10; i++)
  data.push({
    x: i,
    y: (Math.sin(i/10) * 10) -10
  });

var options = {
  series: [{
    data: data
  }],
  chart: {
    height: 350,
    type: 'scatter',
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  title: {
    text: 'Modified Math.Sin',
    align: 'left'
  },
  grid: {
    row: {
      colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
      opacity: 0.5
    },
  },
  annotations: {
    xaxis: [{
      x: 45,
      strokeDashArray: 0,
      borderColor: '#775DD0',
      label: {
        borderColor: '#775DD0',
        style: {
          color: '#fff',
          background: '#775DD0',
        },
        text: 'Annotation',
      }
    }]

  }
};

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

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

<div id="chartsimple"></div>

Apexcharts 如何将 x 轴交换为 y 轴？

Apexcharts How to Swap xAxis to yAxis?

javascript

jquery

apexcharts