Блог

Кодовое обозначение: https://codepen.io/drewkiimon/pen/LYydNdE

Привет вам всем. Дополнительные вопросы по визуализации данных.

Прямо сейчас я использую столбчатую диаграмму для создания сгруппированных столбчатых диаграмм, в которых я использую категории для создания этих 3 различных полей. Однако я сталкиваюсь с проблемой, когда мои данные визуализируются должным образом, но у меня есть эти пустые места, где должны располагаться стеки. Например, в CA стеке 4 и 5 не отображаются , потому что у них нет данных, и я хотел бы удалить пустое/пустое пустое пространство там.

Так что, в конце концов, в моей таблице не будет пустого белого пространства между всем этим.

Я пытаюсь избежать использования библиотеки сгруппированных категорий. Просто предупреждаю.

Я пытаюсь разобраться в API, но не вижу, как удалить это пустое пространство. Есть какие-нибудь зацепки? Или мне нужно подойти к этому по-другому?

В настоящее время нет такой вещи, доступной из коробки. Здесь потребуется ваша собственная конфигурация. См. Пример этой функции, выравнивающей столбцы по категориям: https://jsfiddle.net/BlackLabel/2orx31dL/

 var justifyColumns = function (chart) {
    var categoriesWidth = chart.plotSizeX / (1   chart.xAxis[0].max - chart.xAxis[0].min),
        distanceBetweenColumns = 0,
        each = Highcharts.each,
        sum, categories = chart.xAxis[0].categories,
        number;
    for (var i = 0; i < categories.length; i  ) {
        sum = 0;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        sum  ;
                    }
                });
            }
        });
        distanceBetweenColumns = categoriesWidth / (sum   1);
        number = 1;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        ob.graphic.element.x.baseVal.value = i * categoriesWidth   distanceBetweenColumns * number - ob.pointWidth / 2;
                        number  ;
                    }
                });
            }
        });
    }
};