Уменьшить размер баров в простых гистограммах в амбразах

http://www.amcharts.com/demos/simple-column-chart/#theme-none Я следую за этим script

var chart = AmCharts.makeChart("chartdiv", {
 "type": "serial",
 "theme": "none",
 "dataProvider": [{
 "country": "USA",
 "visits": 2025
 }, {
 "country": "China",
 "visits": 1882
 }, {
 "country": "Japan",
 "visits": 1809
 }, {
 "country": "Germany",
 "visits": 1322
 }, {
 "country": "UK",
 "visits": 1122
 }, {
 "country": "France",
 "visits": 1114
 }, {
 "country": "India",
 "visits": 984
 }, {
 "country": "Spain",
 "visits": 711
 }, {
 "country": "Netherlands",
 "visits": 665
 }, {
 "country": "Russia",
 "visits": 580
 }, {
 "country": "South Korea",
 "visits": 443
 }, {
 "country": "Canada",
 "visits": 441
 }, {
 "country": "Brazil",
 "visits": 395
 }],
 "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": "visits" 
 }],
 "chartCursor": {
 "categoryBalloonEnabled": false,
 "cursorAlpha": 0,
 "zoomable": false
 },
 "categoryField": "country",
 "categoryAxis": {
 "gridPosition": "start",
 "gridAlpha": 0,
 "tickPosition":"start",
 "tickLength":20
 },
 "exportConfig":{
 "menuTop": 0,
 "menuItems": [{
 "icon": '/lib/3/images/export.png',
 "format": 'png' 
 }] 
 }
});

Когда я удаляю все данные, кроме 2 стран (я имею в виду 2 бара), ширина полосы увеличивается до полного размера страницы.

Я попытался даже удалить ширину 100% в css, но не успел.

Я просто хочу, если есть одна информация, тогда напечатайте одну гистограмму небольшого (фиксированного) размера. если их больше 1, то следует добавить автоматически... (не касается пространства, оставшегося в правой части)

1 ответ

Вы можете легко форсировать все столбцы с одной и той же постоянной шириной пикселя, используя свойство graph.fixedColumnWidth.

Здесь приведена соответствующая документация:

http://docs.amcharts.com/3/javascriptcharts/AmGraph#fixedColumnWidth

код:

"graphs": [{
 "balloonText": "[[category]]: <b>[[value]]</b>",
 "fillAlphas": 0.8,
 "lineAlpha": 0.2,
 "type": "column",
 "valueField": "visits",
 "fixedColumnWidth": 50
}],

И рабочий пример: http://jsfiddle.net/amcharts/nctpzzbr/

Если вам нужно, чтобы контейнер диаграммы увеличивался/уменьшался в зависимости от фактического количества элементов на диаграмме, это более сложно, но также возможно.

Для этого мы будем использовать свойство "AmCharts.addInitHandler", чтобы настроить нашу собственную функцию на выполнение до:

// this will get executed BEFORE chart is drawn
// we'll use it to modify the width of the chart area
AmCharts.addInitHandler(function(chart) {
 // total offsets reserved for margins
 var offsets = 100;
 // pixel value reserved for each category
 var categoryWidth = 80;
 // calculate width
 var width = offsets + chart.dataProvider.length * categoryWidth;
 // set container width
 document.getElementById("chartdiv").style.width = "" + width + "px";
 // since the chart is already build for the initial container size we need to
 // revalidate it size. we'll delay a little bit the call to invalidateSize()
 // so that the chart elements are created first
 setTimeout(function () {
 chart.invalidateSize();
 document.getElementById("chartdiv").style.display = "block";
 }, 1);
}, ['serial']);

И вот рабочий пример с приведенным выше кодом: http://jsfiddle.net/amcharts/tc3uf92e/

licensed under cc by-sa 3.0 with attribution.