Я строю перевернутую 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"}]}]