为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕沐林林 2022-12-22 15:43:30
我正在使用 Amchart 4 可视化条形图。我正在使用来自 amchart 的官方示例。现在,我面临的问题是当标签很长时,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 instancevar chart = am4core.create("chartdiv", am4charts.XYChart);// Add datachart.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 axisvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.minGridDistance = 30;// Configure axis labelvar label = categoryAxis.renderer.labels.template;label.wrap = true;label.maxWidth = 120;// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category";现在,我只是不想截断标签,就像这个官方文件一样。但我想有某种解决方案,例如仅当标签超出某些maxHeight属性时才截断标签。这样一来,我仍然可以显示不超出maxHeight属性范围的完整标签。对于现场示例:JSFIDDLE
查看完整描述

1 回答

?
莫回无

TA贡献1865条经验 获得超7个赞

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


chart.data.map(el => {

  if(el.category.length > 80){

    el.category=`${el.category.substr(0,40)}...`;

  }

})

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


查看完整回答
反对 回复 2022-12-22
  • 1 回答
  • 0 关注
  • 102 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信