Amchart 4 не показывает гистограмму при очень длинной метке - PullRequest
Новая
       35

Amchart 4 не показывает гистограмму при очень длинной метке

0 голосов
/ 06 августа 2020

Я использую Amchart 4 для визуализации гистограммы. Я использую этот официальный пример из amchart.

Теперь проблема, с которой я столкнулся, заключается в том, что amchart не отображает гистограммы при очень длинной метке. Он неправильно с этим обращается. Это выглядит так.

enter image description here

This is my js code:

/**
 * --------------------------------------------------------
 * 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";

Now, I just don't want to truncate the label, like this official документ . Но я хотел бы иметь какое-то решение, такое как усечение меток, только если оно выходит из какого-то свойства maxHeight. Таким образом, я все еще могу отображать полные метки, которых нет go из свойства maxHeight.

Для живого примера: JSFIDDLE

1 Ответ

1 голос
/ 09 августа 2020

Если вы хотите, вы можете использовать этот код после запуска вашего массива. Я просто просматриваю категории и проверяю длину, я думаю, что длина, которая разбивает диаграмму, составляет где-то около 80-85, это зависит от контекста, но вы можете иметь минимальное безопасное число может быть 80 

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

и изменить числа в зависимости от того, что вам подходит.

...