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

时间：2018-06-27 16:19:55

标签： javascript css charts amcharts 

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
   
    "dataProvider":[{"category":"sourcing\n 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黑色”）使用其他字体系列，所以我得到了类别名称的叠加层。 如何避免这种情况？

original image with the problem

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

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

我做了一个jsFiddle尝试，您将看到只是调整窗口大小的效果 jsfiddle example

jsfiddle屏幕截图 jsfiddle image Screenshot of the first answer received

3 个答案:

答案 0 :(得分：0)

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

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

检查以下代码段：

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
   
    "dataProvider":[{"category":"sourcing\n 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>

答案 1 :(得分：0)

在空数据项和数据项之间交替之外，实际上没有任何方法可以增加额外的间隔。除此之外，您可以尝试以下操作：

1）您可以将labelRotation in your categoryAxis设置为一定角度以旋转标签，从而减少重叠的可能性。

2）您可以使用responsive plugin并添加规则以帮助调整各种宽度阈值处的轴标签。例如，您可以将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": "sourcing\n 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>

答案 2 :(得分：0)

我以前解决的方法是在每个单词上添加换行符，并设置图表的最小大小

  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');
}
相关问题
最新问题