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

Question

我正在使用 apex 图表来制作现代且灵活的图表。 (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>

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

Get correct sizing for apex line chart

html

javascript

charts

apex

apexcharts