Блог

Главная - Вопросы по программированию - Как настроить пробелы между столбцами кластера в amCharts JS

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

#javascript #css #amcharts

#javascript #css #amcharts

Вопрос:

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

В версии 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>

Ответ №1:

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

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

 "columnSpacing": 0,

Вот JSFiddlehttps://jsfiddle.net/1w3tbvyv /

Комментарии:

1. Я пробовал это раньше, но происходит то, что 2-й столбец 1-го стека прилипает к 1-му столбцу 2-го стека

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

3. Спасибо, теперь я знаю, что columnWidth — это интервал между диаграммами с одним столбцом, а columnSpacing — для кластеризованных столбцов.