Удалить пробел между категориями в столбце диаграммы диапазона, когда я удаляю серию - PullRequest
0 голосов
/ 05 марта 2019

Я строю перевернутую columnrange диаграмму в верхних графиках и мне интересно, возможно ли что-то из следующего ...

Каждая строка (или уникальное значение x) в моей диаграмме имеет несколько диапазонов (без перекрытий внутри строки). Кроме того, строки сгруппированы в разные серии на основе атрибута категории. Затем я использую легенду, чтобы показать или скрыть отдельные серии.

Из-за того, как я извлекаю chart_data, строки уже упорядочены в порядке category (например, я обрабатываю всю категорию A, затем B, затем C, а не A, B, A, C, A, D, ...)

Все данные загружаются в график на 100% успешно. Когда я скрываю первую или последнюю показанную категорию (например, A), размер моей диаграммы изменяется, чтобы скрыть значения x (строки), на которых больше нет данных.

Однако, когда я скрываю ряд в середине диаграммы, а данные строк исчезают, размер диаграммы не изменяется, чтобы скрыть эти значения x без данных. Это оставляет меня с очень большим разрывом в моем графике, где я хотел бы, чтобы эти значения x полностью исчезли.

Хотелось бы привести минимальный пример, но мое рабочее место блокирует различные сайты codepen / jsfiddle. Я попытаюсь сделать это в ascii ...

Все данные загружены. Series представляет серию, item # представляет строку (диаграмма перевернута). Тире представляют столбцы (временные интервалы, в моем случае) в строке:

Series A - item 1 = ----- ----- --
Series A - item 2 = --  - ----- --
Series B - item 3 = ----- --    --
Series B - item 4 = --- ----- ----
Series C - item 5 = ----------- --
Series C - item 6 = --- --- --- --

Когда я прячу Series A корзина скрывает товары без значений. Это здорово

Series B - item 3 = ----- --    --
Series B - item 4 = --- ----- ----
Series C - item 5 = ----------- --
Series C - item 6 = --- --- --- --

Когда я скрываю Series B, диаграмма не скрывает элементы. Это не здорово Моя цель спрятать эти предметы :

Series A - item 1 = ----- ----- --
Series A - item 2 = --  - ----- --
Series B - item 3 =
Series B - item 4 =
Series C - item 5 = ----------- --
Series C - item 6 = --- --- --- --

Когда я скрываю Series C, диаграмма скрывает элементы без значений. Это здорово:

Series A - item 1 = ----- ----- --
Series A - item 2 = --  - ----- --
Series B - item 3 = ----- --    --
Series B - item 4 = --- ----- ----

Вот некоторый псевдокод того, как я заполняю свой график:

var chart = Highcharts.chart("chart_container", {
    chart: {
        type: 'columnrange',
        inverted: true
    },
    xAxis: {
        type: "category"
    },
    yAxis: {
        type: 'datetime'
    },
    plotOptions: {
        columnrange: {
            grouping: false
        }
    },
    legend: {
        enabled: true,
    }
}

var series = [];
var row_names = [];
var current_row_x = 0;

# Iterate over each row of data -- each row contains many timespans
# Should be one row per x value

chart_data.forEach(function(row) {
    # Save this row name -- will be used for x axis labels
    var row_name = row['name'];
    row_names.push(row_name);

    # Get category name
    var category_name = row['category_name'];

    // Create a series for this category if it does not exist
    if (!(category in series)) {
        series[category] = {
            name: category,
            data: [],
            turboThreshold: 0
        }
    }

    # For each timespan in this row, add to chart
    row['timespans'].forEach(function(timespan) {

        // Add timespan to series for this category
        series[category_name]['data'].push({
            low: new Date(timespan['begin_dt']),
            high: new Date(timespan['end_dt']),
            x: current_row_x
        });

    });
    current_row_x++;
});

# Set the category names -- gives labels to x axis
chart.xAxis[0].setCategories(file_names);

# Add every series to the chart, do not redraw until end
Object.keys(series).map(function(category_name) {
    s = series[category_name];
    chart.addSeries(s, false);
}); 

# Redraw the chart
chart.redraw();
chart.reflow();

Надеюсь, я достаточно подробно описал свою цель - задавайте вопросы, если есть путаница!

Редактировать: Пример набора данных

[{"name":"row_1","category":"category_A","timespans":[{"begin_dt":"2018-01-01T00:00:00Z","end_dt":"2019-01-01T00:00:00Z"},{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]},{"name":"row_2","category":"category_A","timespans":[{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]},{"name":"row_3","category":"category_B","timespans":[{"begin_dt":"2018-01-01T00:00:00Z","end_dt":"2019-01-01T00:00:00Z"},{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]},{"name":"row_4","category":"category_B","timespans":[{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]},{"name":"row_5","category":"category_C","timespans":[{"begin_dt":"2018-01-01T00:00:00Z","end_dt":"2019-01-01T00:00:00Z"},{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]},{"name":"row_6","category":"category_C","timespans":[{"begin_dt":"2019-01-01T00:00:00Z","end_dt":"2020-01-01T00:00:00Z"}]}]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...