当标签很长时，Amchart 4 不显示条形图

Question

我正在使用 Amchart 4 可视化条形图。我正在使用来自 amchart.

的官方 example

现在，我面临的问题是，当标签很长时，amchart 不会呈现条形图。它没有正确处理它。看起来像这样。

这是我的js代码：

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 * 
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "category": "First very long category label, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long",
  "value": 450
}, {
  "category": "Another long category label",
  "value": 1200
}];

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

// Configure axis label
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";

现在，我只是不想截断标签，就像这个官方document。但我想要某种解决方案，例如仅当标签超出某些 maxHeight 属性时才截断标签。这样一来，我仍然可以显示不超出 maxHeight 属性.

的完整标签

对于实际示例：JSFIDDLE

Answer 1

如果你愿意，你可以在启动你的阵列后使用这段代码我只是浏览类别，并检查长度，我认为打破图表的长度在 80-85 左右，它基于上下文，但你可以有一个最小安全数字可能是 80

chart.data.map(el => {
  if(el.category.length > 80){
    el.category=`${el.category.substr(0,40)}...`;
  }
})

并根据自己的需要修改数字。

当标签很长时，Amchart 4 不显示条形图

Amchart 4 not showing bar graph when there is very long label

javascript

amcharts4