Получить правильный размер для линейного графика вершины - PullRequest
Новая
       81

Получить правильный размер для линейного графика вершины

1 голос
/ 02 апреля 2019

Я использую диаграмму вершины для современных и гибких диаграмм. (https://apexcharts.com/).
Вот мой фрагмент кода: 

var options = {
      chart: {
        height: 15,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      series: [{
        name: "Desktops",
        data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
      }],
      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'],
      }
    }

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

    chart.render();
<div id="chart">
  
</div>

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

Как вы можете видеть, высота графика не нужна. Его причина в небольших количествах. Когда у меня есть данные более 100, это работает, но с небольшими числами у меня есть эта проблема. Любые решения, чтобы это исправить?
~ Filip

1 Ответ

2 голосов
/ 02 апреля 2019

попробуйте увеличить chart.height до 200.
это позволяет диаграмме быть видимой.

см. Следующий рабочий фрагмент ... 

var options = {
      chart: {
        height: 200,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      series: [{
        name: "Desktops",
        data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
      }],
      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'],
      }
    }

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

    chart.render();
<div id="chart">
  
</div>

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