Как добавить пространство между столбцами в столбчатой ​​диаграмме amCharts, чтобы избежать наложения категории - PullRequest
Новая
       6

Как добавить пространство между столбцами в столбчатой ​​диаграмме amCharts, чтобы избежать наложения категории

0 голосов
/ 27 июня 2018 

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), поэтому я получил наложение названий категорий. Как можно избежать этого?

исходное изображение с проблемой

Я пробовал правила CSS, такие как межбуквенный интервал, межсловный интервал, маленький размер, но все выглядит ужасно

есть ли элегантное решение? Спасибо

Я попробовал jsFiddle, вы увидите эффект, просто изменив размер окна Пример jsfiddle

jsfiddle screenshot jsfiddle image Скриншот первого полученного ответа

Ответы [ 3 ]

0 голосов
/ 28 июня 2018

В действительности нет способа добавить дополнительный интервал вне чередования между пустыми элементами данных и вашими элементами данных. Помимо этого, вы можете попробовать следующее:

1) Вы можете установить labelRotation в вашем categoryAxis на некоторый угол, чтобы повернуть метки, чтобы они с меньшей вероятностью перекрывались.

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": "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>
0 голосов
/ 28 июня 2018

Решением, которое я использовал для решения этой проблемы, является добавление разрыва строки в каждое слово и установка минимального размера диаграммы 

  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');
}
0 голосов
/ 27 июня 2018

Лучший способ предотвратить это - установить 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>
...