如何为FusionCharts及ApexCharts柱形图设置最小高度/宽度

一、FusionCharts（column2d）的解决方案 #

FusionCharts提供了专属配置项来强制柱形保持可交互的最小尺寸，你只需在chart配置对象中添加以下参数：

• minColumnHeight：设置柱形的最小高度（单位：像素）
• minColumnWidth：设置柱形的最小宽度（单位：像素，适配图表宽度变化场景）

修改后的完整配置代码 #

const chartConfigs = {
  type: "column2d",
  width: "100%",
  height: 500,
  dataFormat: "json",
  dataSource: {
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion",
      minColumnHeight: 20, // 强制柱形最小高度为20px
      minColumnWidth: 30   // 强制柱形最小宽度为30px
    },
    data: [
      { label: "Venezuela", value: "290" },
      { label: "Saudi", value: "260" },
      { label: "Canada", value: "180" },
      { label: "Iran", value: "140" },
      { label: "Russia", value: "115" },
      { label: "UAE", value: "100" },
      { label: "US", value: "3000000" },
      { label: "China", value: "30" },
    ],
  },
};

配置生效后，即使数据值远小于其他项，柱形也会保持指定的最小尺寸，确保用户能正常点击或悬停查看数据。

二、ApexCharts的解决方案 #

ApexCharts通过plotOptions.bar下的参数控制柱形最小尺寸，同时支持对数轴优化极端数据的显示效果：

基础最小尺寸配置代码 #

const options = {
  chart: {
    type: 'bar',
    height: 500
  },
  plotOptions: {
    bar: {
      minHeight: 20, // 设置柱形最小高度
      minWidth: 30,  // 设置柱形最小宽度
      borderRadius: 4
    }
  },
  series: [{
    name: 'Reserves',
    data: [290, 260, 180, 140, 115, 100, 3000000, 30]
  }],
  xaxis: {
    categories: ["Venezuela", "Saudi", "Canada", "Iran", "Russia", "UAE", "US", "China"]
  }
};

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

极端数据优化补充 #

如果数据差异过大，可开启对数坐标轴让小数据的差异更直观：

• FusionCharts：在chart对象中添加yAxisLogScale: 1
• ApexCharts：在yaxis配置中添加type: 'log'

内容的提问来源于stack exchange，提问作者Fakhamatia