如何在 amCharts 条形图中的列之间添加空格以避免类别重叠

Question

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",

"dataProvider":[{"category":"sourcingn e prime lavorazioni ","value":-2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":true,"labelClass":"filiera-label"},{"category":"lavorazioni intermedieeeeeeeee ","value":-1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":false},{"category":"lavorazioni finali ","value":2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"distribuzione ","value":1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"valore medio filiera","average":0,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false}],
"valueAxes": [{
"gridColor":"#FFFFFF",
		"gridAlpha": 0.2,
		"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "value"		
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"autoWrap": true,
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20,
"classNameField": 'labelClass'
},
	"exportConfig":{
	  "menuTop": 0,
	  "menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'	  
}]  
	}
});

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}	
.filiera-label tspan {
font-family: Arial Black;
}

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>	

我正在使用AmChart 3制作条形图，并为一个类别(Arial Black(使用不同的字体系列，所以我得到了类别名称的叠加。 如何避免这种情况？

原始图像有问题

我尝试了 css 规则，如字母间距、字间距、小尺寸，但一切看起来都很丑陋

有什么优雅的解决方案吗？谢谢

我做了一个jsFiddle尝试，你会看到效果只是调整窗口大小 JSFIDDLE 示例

JSFIDDLE 屏幕截图 jsfiddle图像收到的第一个答案的屏幕截图

Answer 1

防止这种情况发生的最佳方法是设置overflow: hidden;以防止内部HTML和word-break: break-word;重叠，以提供至少某种形式的单词相似性，这样它们就不会在随机点中断。

此外，虽然不是必需的，但出于视觉原因，添加一些非填充以增加列之间的一些额外空间可能是一个好主意padding: 0 5%;

检查以下代码片段：

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",

"dataProvider":[{"category":"sourcingn e prime lavorazioni ","value":-2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":true,"labelClass":"filiera-label"},{"category":"lavorazioni intermedieeeeeeeee ","value":-1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":false},{"category":"lavorazioni finali ","value":2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"distribuzione ","value":1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"valore medio filiera","average":0,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false}],
"valueAxes": [{
"gridColor":"#FFFFFF",
		"gridAlpha": 0.2,
		"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "value"		
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"autoWrap": true,
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20,
"classNameField": 'labelClass'
},
	"exportConfig":{
	  "menuTop": 0,
	  "menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'	  
}]  
	}
});

#chartdiv {
	width		: 100%;
padding: 0 5%;
overflow: hidden;
word-break: break-all;
	height		: 500px;
	font-size	: 11px;
}	
.filiera-label tspan {
font-family: Arial Black;
}

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

Answer 2

除了在空数据项和数据项之间交替之外，实际上没有一种方法可以添加额外的间距。除此之外，您可以尝试以下操作：

1( 您可以将categoryAxis中的labelRotation设置为某个角度以旋转标签，使它们不太可能重叠。

2(您可以使用响应式插件并添加规则来帮助在各种宽度阈值下调整轴标签。例如，您可以更改特定最小宽度的labelRotation，以便它们更易于阅读，或者在较小的宽度下完全禁用它们

"responsive": {
"enabled": true,
"rules": [{
"minWidth": 600,  //rotate to 45 degrees when width is between 600-800 px
"maxWidth": 800,
"overrides": {
"categoryAxis": {
"labelRotation": 45
}
}
}, {
"maxWidth": 599, //rotate to 90 when width is between 350-599px
"minWidth": 350,
"overrides": {
"categoryAxis": {
"labelRotation": 90
}
}
}, {
"maxWidth": 349, //disable when too small
"overrides": {
"categoryAxis": {
"labelsEnabled": false,
"tickLength": 0
}
}
}]
}

下面是一个演示，演示了这一点。

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"category": "sourcingn e prime lavorazioni ",
"value": -2,
"reminderPositive": 999999999,
"reminderNegative": -999999999,
"colorFill": ["#f68e8c", "#f6bebc"],
"colorBorder": "#f45854",
"isImpresaInFaseFiliera": true,
"labelClass": "filiera-label"
}, {
"category": "lavorazioni intermedieeeeeeeee ",
"value": -1,
"reminderPositive": 999999999,
"reminderNegative": -999999999,
"colorFill": ["#f68e8c", "#f6bebc"],
"colorBorder": "#f45854",
"isImpresaInFaseFiliera": false
}, {
"category": "lavorazioni finali ",
"value": 2,
"reminderPositive": 999999999,
"reminderNegative": -999999999,
"colorFill": ["#add09d", "#cde0cd"],
"colorBorder": "#88bc72",
"isImpresaInFaseFiliera": false
}, {
"category": "distribuzione ",
"value": 1,
"reminderPositive": 999999999,
"reminderNegative": -999999999,
"colorFill": ["#add09d", "#cde0cd"],
"colorBorder": "#88bc72",
"isImpresaInFaseFiliera": false
}, {
"category": "valore medio filiera",
"average": 0,
"reminderPositive": 999999999,
"reminderNegative": -999999999,
"colorFill": ["#add09d", "#cde0cd"],
"colorBorder": "#88bc72",
"isImpresaInFaseFiliera": false
}],
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "value"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"autoWrap": true,
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"classNameField": 'labelClass'
},
"exportConfig": {
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
},
"responsive": {
"enabled": true,
"rules": [{
"minWidth": 600,
"maxWidth": 800,
"overrides": {
"categoryAxis": {
"labelRotation": 45
}
}
}, {
"maxWidth": 599,
"minWidth": 350,
"overrides": {
"categoryAxis": {
"labelRotation": 90
}
}
}, {
"maxWidth": 349,
"overrides": {
"categoryAxis": {
"labelsEnabled": false,
"tickLength": 0
}
}
}]
}
});

#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
.filiera-label tspan {
font-family: Arial Black;
}

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<div id="chartdiv"></div>

Answer 3

我用来解决的解决方案是为每个单词添加换行符，并设置图表的最小大小

formatCategoryLabelChart(charts) {
_.each(charts, chart => {
const categories = chart.compiledChart.categoryAxis.chart.dataProvider;
_.each(categories, category => { category.category = this.addLineBreak(category.category) });
})
}
addLineBreak(str) {
return str.replace('n', '' ).split(' ').join('n');
}