Question

我正在用高图建立倒置的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"}]}]

删除系列时，请删除列范围图表中类别之间的空间

0 个答案: