javascript - ApexCharts 强制 100% 高度

标签 javascript apexcharts

我一直在为这个问题苦苦挣扎,我需要在容器的 height 处有 100% 的图形。

对于我向他表明他的高度:'100%' 的权重仍然在上方和下方带有空格,tabiem 我将 false 值赋予 yaxis 但仍然是问题依然存在。

能解决的人会很感激的。

var options = {
  chart: {
    type: 'line',
    width: '100%',
    height: '100%',
    toolbar: {
      show: false
    },
  },
  grid: {
    show: false,
    padding: {
      left: 0,
      right: 0
    }
  },
  tooltip: {
    intersect: false,
    x: {
      show: false
    },
    marker: {
      show: false
    }
  },
  dataLabels: {
          enabled: false
        },
  yaxis: {
    show: false,
  },
  xaxis: {
    tooltip: {
      enabled: false
    },
    labels: {
      show: false
    },
    axisBorder: {
      show: false
    }
  },
  

  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }]
}

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

chart.render();
#chart{
  width: 500px;
  height: 200px;
  border: 1px solid #000;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

最佳答案

如果不需要显示x轴、y轴,可以开启sparkline.enabled标志,去掉图表区域上下所有不必要的空格

chart: {
   sparkline: {
      enabled: true
   }
}

关于javascript - ApexCharts 强制 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55736246/

相关文章:

javascript - 在包含的 html 文件上定位图像

javascript - Apexcharts xaxis 格式在使用日期时间类型时失败

charts - 设置 Apexcharts 图表列的最小高度或宽度

javascript - 垂直对齐标题 APEXCHARTS

javascript - 转换 D3 后更改对象属性

javascript - 使用比较函数js排序

javascript - 希望将带有参数的回调函数传递给 Polymer 中的子组件

javascript - 如何更改 Apexcharts RadialBar Charts 中非进度条的颜色?

javascript - Apexcharts 项目栏上的最大宽度

javascript - 在android webview中使用angularjs时如何禁用网络安全?