首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当有很长的标签时,bar图4没有显示条形图

当有很长的标签时,bar图4没有显示条形图
EN

Stack Overflow用户
提问于 2020-08-06 15:55:30
回答 1查看 612关注 0票数 0

我正在使用Am图表4来可视化条形图。我正在使用这张表上的官方示例

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

这是我的js代码:

代码语言:javascript
复制
/**
 * --------------------------------------------------------
 * 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";

现在,我只是不想截断标签,像这个正式的文档。但是,我希望有某种解决方案,比如,只有当maxHeight属性退出时,才会截断标签。这样,我仍然可以显示不超出maxHeight属性的完整标签。

对于活生生的例子:JSFIDDLE

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-09 18:58:25

如果您想要在启动数组后可以使用此代码,我只需检查类别,并检查长度,我认为打破图表的长度在80-85左右,它是基于上下文的,但是您可以有一个最小的安全号码--可能是80

代码语言:javascript
复制
chart.data.map(el => {
  if(el.category.length > 80){
    el.category=`${el.category.substr(0,40)}...`;
  }
})

并根据适合你的情况修改数字。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63287417

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档