AmCharts - XYChart - 最小柱高度答案

【问题标题】：AmCharts - XYChart - min bar heightAmCharts - XYChart - 最小柱高度
【发布时间】：2020-07-31 07:28:11
【问题描述】：

我有一个 XYChart，但不幸的是值变化很大，并且条形的比例不好。

我认为为条形设置最小高度以使其看起来更好应该不是问题，但是一个多小时后我仍然没有找到我要找的东西。这个功能真的不存在还是我太笨找不到了？

这是我的代码： chart.data = 数据；

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "ch";
categoryAxis.renderer.minGridDistance = 1;  // lable size
categoryAxis.renderer.labels.template.rotation = 360;
categoryAxis.tooltip.disabled = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.sequencedInterpolation = true;
series.dataFields.valueY = "pu";
series.dataFields.categoryX = "ch";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;
series.tooltip.pointerOrientation = "vertical";

series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
series.columns.template.column.fillOpacity = 1;

var hoverState = series.columns.template.column.states.create("hover");
hoverState.properties.fillOpacity = 1;

series.columns.template.adapter.add("fill", function(fill, target) {
    return chart.colors.getIndex(target.dataItem.index);
});

chart.cursor = new am4charts.XYCursor();

还有图表：

感谢您的帮助！

【问题讨论】：

标签： amcharts amcharts4

【解决方案1】：

您不能为列指定最小高度，因为这会改变其值。您可以尝试使用axis break 删除轴范围的一部分，以使较小的值看起来更大一些：

axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 20;
axisBreak.endValue = 40;
axisBreak.breakSize = 0.05;

根据需要调整值。还有一个带有鼠标悬停效果的演示，用于删除演示页面here上的中断。

【讨论】：