Apexcharts Как поменять xAxis на yAxis? - PullRequest
Новая
       38

Apexcharts Как поменять xAxis на yAxis?

1 голос
/ 23 апреля 2020

У меня есть линейный график, использующий плагины Apexcharts, я хочу поменять местами положение xAxis на yAxis и yAxis на xAxis. Кто-нибудь знает ?, это из примера кода Строка Apexchart 

 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();

результат: enter image description here

я хочу поменять местами xAxis (месяцы ) к yAxis и yAxis (число) к xAxis, как показано ниже: enter image description here

1 Ответ

0 голосов
/ 23 апреля 2020

Вот пример того, как вы добьетесь того, чего хотите. Вам придется изменить данные в соответствии с вашими потребностями. Существует множество различных способов предоставить данные с помощью 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>
...