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

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 时，它可以工作，但是数量很少时，我遇到了这个问题。有什么解决方案可以解决这个问题？
~菲利普

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>