获取正确的顶点折线图尺寸

Question

我将顶点图表用于现代灵活的图表。 （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

Answer 1

尝试将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>