设置列 FusionCharts 的最小高度或宽度答案

【问题标题】：Set minimum height or width for column FusionCharts设置列 FusionCharts 的最小高度或宽度
【发布时间】：2023-01-07 16:16:46
【问题描述】：

如果数据比其他数据低很多，则几乎为零，用户无法点击或悬停，因为它太小了。

如何为非常小的数字设置最小高度或宽度？

我对 ApexCharts 也有这个问题。

  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",
      },
      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",
        },
      ],
    },
  };

【问题讨论】：

标签： reactjs charts fusioncharts react-fusioncharts

【解决方案1】：

这是正常的，因为如果您的一个绘图具有非常大的值并且其他绘图值与大绘图值相比非常低，则您的 y 轴刻度是线性的，那么较小值绘图的绘图区域将非常小。

为了克服这个问题，您可以使用对数 y 轴，这是一个示例 -

FusionCharts.ready(function() {
  var footfallChart = new FusionCharts({
    type: 'logmscolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Store footfall vs Online visitors ",
        "subCaption": "Last Year",
        "xAxisName": "Quarter",
        "yAxisName": "No of visitors",
        "showXAxisLine": "1",
        "axisLineAlpha": "10"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
        "seriesname": "Total footfalls",
        "data": [{
            "value": "126734"
          },
          {
            "value": "64"
          },
          {
            "value": "34"
          },
          {
            "value": "56"
          },
          {
            "value": "78"
          }
        ]
      }]


    }
  }).render();

});

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">FusionCharts will render here</div>

【讨论】：