Как настроить пробелы между кластерами в AmCharts JS

Я использовал флэш-версию AmCharts, а во флэш-версии я могу легко создать кластерные столбцы/столбчатые диаграммы, подобные изображению ниже. Как вы видите, кластерные бары не имеют места. У меня возникли проблемы с тем же успехом в JS-версии AmChart. Как настроить пробелы между кластерами в AmCharts JS

В версии JS вот что это выглядит.

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

Ниже приведен мой код.

<!DOCTYPE html> 
<html> 
<head> 
<title>chart created with amCharts | amCharts</title> 
<meta name="description" content="chart created using amCharts live editor" /> 

<!-- amCharts javascript sources --> 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 


<!-- amCharts javascript code --> 
<script type="text/javascript"> 
AmCharts.makeChart("chartdiv", 
{ 
"type": "serial", 
"categoryField": "category", 
"backgroundColor": "#00000", 
"fontSize": 11, 
"color":"#ffffff", 
"startDuration": 1, 
"categoryAxis": { 
"autoRotateAngle": -7.2, 
"gridPosition": "start", 
"labelRotation": -90, 
"titleRotation": 0 
}, 
"trendLines": [], 
"graphs": [ 
{ 
"balloonText": "[[title]] of [[category]]:[[value]]", 
"fillAlphas": 1, 
"fillColors": "#ff0000", 
"id": "AmGraph-1", 
"title": "graph 1", 
"title": "DIRECT", 
"type": "column", 
"valueField": "column-1" 



}, 
{ 
"balloonText": "[[title]] of [[category]]:[[value]]", 
"fillAlphas": 1, 
"fillColors": "#008000", 
"id": "AmGraph-2", 
"title": "graph 2", 
"title": "TRANSIT", 
"type": "column", 
"valueField": "column-2" 

} 
], 
"guides": [], 
"valueAxes": [ 
{ 
"id": "ValueAxis-1", 
"title": "Axis title" 
} 
], 
"allLabels": [], 
"balloon": {}, 
"legend": { 
"enabled": true, 
"color": "#ffffff", 
"position": "absolute", 
"useGraphSettings": true 


}, 
"titles": [ 
{ 
"id": "Title-1", 
"size": 15, 
"text": "DAILY REPORT OF TRAFFIC TYPE" 
} 
], 
"dataProvider": [ 
{ 
"category": "2016-10-01", 
"column-1": 22, 
"column-2": 23 
}, 
{ 
"category": "2016-10-02", 
"column-1": 11, 
"column-2": 13 
}, 
{ 
"category": "2016-10-03", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-04", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-05", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-06", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-07", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-08", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-09", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-10", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-11", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-12", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-13", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-14", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-15", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-16", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-17", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-18", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-19", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-20", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-21", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-22", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-23", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-24", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-25", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-26", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-27", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-28", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-29", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-30", 
"column-1": null, 
"column-2": null 
} 
] 
} 
); 

</script> 
</head> 
<body> 
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #222222;" ></div> 
</body> 
</html>

источник

2016-10-19 TwoThumbSticks

Вам нужно установить "columnSpacing":0 для баров и они будут касаться.

прямо в верхней части кода, строки 16 после слова «типа»: «серийный», добавьте строку:

"columnSpacing": 0,

Вот JSFiddle https://jsfiddle.net/1w3tbvyv/

источник

2016-10-19 02:19:16 Acoustic77

Я попробовал, что и раньше, но то, что происходит, что вторая полоса 1-го стека прилипает к 1-му бару второго стека – TwoThumbSticks

Извините, я обновил свой ответ, вам нужна columnSpacing, а не ширина. Включена скрипка! – Acoustic77

Спасибо, теперь я знаю, что columnWidth используется для разделения столбцов в одной колонке, а columnSpacing - для кластерных столбцов. – TwoThumbSticks

Как настроить пробелы между кластерами в AmCharts JS

ответ

Смежные вопросы