кластерный график amcharts, создающий серию столбцов с пробелом столбца с отсутствующим ключом в json - PullRequest
Новая
       75

кластерный график amcharts, создающий серию столбцов с пробелом столбца с отсутствующим ключом в json

1 голос
/ 09 мая 2020

Есть ли способ удалить ширину (пробел) ряда столбцов отсутствующего ключа или свойства, которого нет в json. Я хочу создать серию групп кластеров со всеми доступными ключами в json. См. Пример ниже.

enter image description here

function init() {

            const data = [
                {
                    'A': 138,
                    'B': 132,
                    'C': 104,
                    'date': 'APR 20'
                },
                {
                    'A': 47,
                    'B': 46,
                    'C': 42,
                    'date': 'MAR 20'
                },
                {
                    'D': 44,
                    'A': 37,
                    'B': 32,
                    'date': 'FEB 20'
                }
            ];
            generateClusterColumnChart('chartdiv', data, 20);
            function generateClusterColumnChart(id, data, cw) {
                am4core.useTheme(am4themes_animated);
                am4core.options.commercialLicense = true; // hide amchart linkwire
                const chart = am4core.create(id, am4charts.XYChart);
                chart.colors.step = 2;

                chart.legend = new am4charts.Legend();
                // chart.legend.markers.template.disabled = true; // disabled legend
                chart.legend.position = 'bottom';
                chart.legend.paddingBottom = 0;
                let markerTemplate = chart.legend.markers.template;
                markerTemplate.width = 12;
                markerTemplate.height = 12;

                chart.legend.labels.template.fontSize = '11px';
                chart.legend.maxHeight = 60;
                chart.legend.scrollable = true;

                const xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                xAxis.dataFields.category = 'date';
                xAxis.renderer.cellStartLocation = 0.2;
                xAxis.renderer.cellEndLocation = 0.8;
                xAxis.renderer.grid.template.disabled = true; // remove axis grid lines
                xAxis.renderer.grid.template.location = 100;
                const label = xAxis.renderer.labels.template;
                // label.wrap = true;
                // label.truncate = true;
                // label.maxWidth = 60;
                label.fontSize = 14;

                const yAxis = chart.yAxes.push(new am4charts.ValueAxis());
                yAxis.renderer.grid.template.disabled = true;
                yAxis.renderer.labels.template.disabled = true;
                yAxis.min = 0;
                yAxis.max = 300;
                yAxis.strictMinMax = true;
                function createSeries(value, name) {
                    const series = chart.series.push(new am4charts.ColumnSeries());
                    series.columns.template.width = cw;
                    series.dataFields.valueY = value;
                    series.dataFields.categoryX = 'date';
                    series.name = name;
                    series.columns.template.tooltipText = '{name}: [bold]{valueY}[/]';
                    series.tooltip.fontSize = '11px';
                    // series.clustered = false;

                    return series;
                }
                let clusterKeys1 = [];
                if (data && data.length) {
                    chart.data = data;
                    clusterKeys1 = data.reduce((keys, obj) => keys.concat(Object.keys(obj).filter((key) => keys.indexOf(key) === -1)), []).filter((date) => date !== 'date');
                } else {
                    chart.data = [];
                    clusterKeys1 = [];
                }
                for (let ck of clusterKeys1) {
                    const tf = ck.replace(ck.charAt(0), ck.charAt(0).toUpperCase());
                    // createSeries(ck, tf);
                    const cSeries = createSeries(ck, tf);
                }
            }
        }
        init();
#chartdiv{
  width: 500px;
  height: 200px;
}
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">

<head>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
</head>

<body>
    <div id="chartdiv"></div>
</body>

Как можно прекратить генерировать серию отсутствующих ключей от определенного объекта. Если есть какой-либо способ отрегулировать пробелы отсутствующих серий, это также соответствует требования.

...