时间戳

首页 > 解决方案 > Highcharts sankey图中的垂直重新排序节点

javascript - Highcharts sankey图中的垂直重新排序节点

问题描述

我目前有以下桑基图：

在此处输入图像描述

我想确保以 C0 开头的节点始终位于顶部。具有 c1 的节点始终位于底部，具有 C2 的节点介于两者之间（当它们存在时）。有什么方法可以强制每列中的这些垂直位置？类似的问题在这里（没有答案）。

JSFiddle

代码：

Highcharts.chart('container', {

    title: {
        text: 'Title'
    },

    series: [{
            colors: ["lightgrey"],
        keys: ['color', 'from', 'to', 'weight'],
        data: [{'color': 'rgb(255, 207, 207)', 'from': 'C0_1', 'to': 'C0_2', 'weight': 638},
 {'color': 'rgb(255, 130, 130)', 'from': 'C0_1', 'to': 'C1_2', 'weight': 164},
 {'color': 'rgb(255, 207, 207)', 'from': 'C1_1', 'to': 'C0_2', 'weight': 123},
 {'color': 'rgb(255, 130, 130)', 'from': 'C1_1', 'to': 'C1_2', 'weight': 1313},
 {'color': 'rgb(255, 212, 212)', 'from': 'C0_2', 'to': 'C0_3', 'weight': 555},
 {'color': 'rgb(255, 127, 127)', 'from': 'C0_2', 'to': 'C1_3', 'weight': 105},
 {'color': 'rgb(255, 212, 212)', 'from': 'C1_2', 'to': 'C0_3', 'weight': 111},
 {'color': 'rgb(255, 127, 127)', 'from': 'C1_2', 'to': 'C1_3', 'weight': 1320},
 {'color': 'rgb(255, 217, 217)', 'from': 'C0_3', 'to': 'C0_4', 'weight': 495},
 {'color': 'rgb(255, 119, 119)', 'from': 'C0_3', 'to': 'C1_4', 'weight': 80},
 {'color': 'rgb(255, 217, 217)', 'from': 'C1_3', 'to': 'C0_4', 'weight': 157},
 {'color': 'rgb(255, 119, 119)', 'from': 'C1_3', 'to': 'C1_4', 'weight': 1223},
 {'color': 'rgb(255, 219, 219)', 'from': 'C0_4', 'to': 'C0_5', 'weight': 374},
 {'color': 'rgb(255, 66, 66)', 'from': 'C0_4', 'to': 'C1_5', 'weight': 32},
 {'color': 'rgb(255, 186, 186)', 'from': 'C0_4', 'to': 'C2_5', 'weight': 157},
 {'color': 'rgb(255, 219, 219)', 'from': 'C1_4', 'to': 'C0_5', 'weight': 91},
 {'color': 'rgb(255, 66, 66)', 'from': 'C1_4', 'to': 'C1_5', 'weight': 623},
 {'color': 'rgb(255, 186, 186)', 'from': 'C1_4', 'to': 'C2_5', 'weight': 545},
 {'color': 'rgb(255, 225, 225)', 'from': 'C0_5', 'to': 'C0_6', 'weight': 299},
 {'color': 'rgb(255, 63, 63)', 'from': 'C0_5', 'to': 'C1_6', 'weight': 27},
 {'color': 'rgb(255, 170, 170)', 'from': 'C0_5', 'to': 'C2_6', 'weight': 59},
 {'color': 'rgb(255, 225, 225)', 'from': 'C1_5', 'to': 'C0_6', 'weight': 13},
 {'color': 'rgb(255, 63, 63)', 'from': 'C1_5', 'to': 'C1_6', 'weight': 425},
 {'color': 'rgb(255, 170, 170)', 'from': 'C1_5', 'to': 'C2_6', 'weight': 197},
 {'color': 'rgb(255, 225, 225)', 'from': 'C2_5', 'to': 'C0_6', 'weight': 136},
 {'color': 'rgb(255, 63, 63)', 'from': 'C2_5', 'to': 'C1_6', 'weight': 135},
 {'color': 'rgb(255, 170, 170)', 'from': 'C2_5', 'to': 'C2_6', 'weight': 409},
 {'color': 'rgb(255, 219, 219)', 'from': 'C0_6', 'to': 'C0_7', 'weight': 273},
 {'color': 'rgb(255, 62, 62)', 'from': 'C0_6', 'to': 'C1_7', 'weight': 29},
 {'color': 'rgb(255, 199, 199)', 'from': 'C0_6', 'to': 'C2_7', 'weight': 62},
 {'color': 'rgb(255, 219, 219)', 'from': 'C1_6', 'to': 'C0_7', 'weight': 12},
 {'color': 'rgb(255, 62, 62)', 'from': 'C1_6', 'to': 'C1_7', 'weight': 440},
 {'color': 'rgb(255, 199, 199)', 'from': 'C1_6', 'to': 'C2_7', 'weight': 116},
 {'color': 'rgb(255, 219, 219)', 'from': 'C2_6', 'to': 'C0_7', 'weight': 49},
 {'color': 'rgb(255, 62, 62)', 'from': 'C2_6', 'to': 'C1_7', 'weight': 211},
 {'color': 'rgb(255, 199, 199)', 'from': 'C2_6', 'to': 'C2_7', 'weight': 382},
 {'color': 'rgb(255, 208, 208)', 'from': 'C0_7', 'to': 'C0_8', 'weight': 239},
 {'color': 'rgb(255, 40, 40)', 'from': 'C0_7', 'to': 'C1_8', 'weight': 9},
 {'color': 'rgb(255, 192, 192)', 'from': 'C0_7', 'to': 'C2_8', 'weight': 31},
 {'color': 'rgb(255, 208, 208)', 'from': 'C1_7', 'to': 'C0_8', 'weight': 39},
 {'color': 'rgb(255, 40, 40)', 'from': 'C1_7', 'to': 'C1_8', 'weight': 403},
 {'color': 'rgb(255, 192, 192)', 'from': 'C1_7', 'to': 'C2_8', 'weight': 210},
 {'color': 'rgb(255, 208, 208)', 'from': 'C2_7', 'to': 'C0_8', 'weight': 77},
 {'color': 'rgb(255, 40, 40)', 'from': 'C2_7', 'to': 'C1_8', 'weight': 106},
 {'color': 'rgb(255, 192, 192)', 'from': 'C2_7', 'to': 'C2_8', 'weight': 344},
 {'color': 'rgb(255, 227, 227)', 'from': 'C0_8', 'to': 'C0_9', 'weight': 222},
 {'color': 'rgb(255, 49, 49)', 'from': 'C0_8', 'to': 'C1_9', 'weight': 24},
 {'color': 'rgb(255, 191, 191)', 'from': 'C0_8', 'to': 'C2_9', 'weight': 47},
 {'color': 'rgb(255, 227, 227)', 'from': 'C1_8', 'to': 'C0_9', 'weight': 6},
 {'color': 'rgb(255, 49, 49)', 'from': 'C1_8', 'to': 'C1_9', 'weight': 367},
 {'color': 'rgb(255, 191, 191)', 'from': 'C1_8', 'to': 'C2_9', 'weight': 110},
 {'color': 'rgb(255, 227, 227)', 'from': 'C2_8', 'to': 'C0_9', 'weight': 49},
 {'color': 'rgb(255, 49, 49)', 'from': 'C2_8', 'to': 'C1_9', 'weight': 147},
 {'color': 'rgb(255, 191, 191)', 'from': 'C2_8', 'to': 'C2_9', 'weight': 369},
 {'color': 'rgb(255, 188, 188)', 'from': 'C0_9', 'to': 'C2_10', 'weight': 24},
 {'color': 'rgb(255, 26, 26)', 'from': 'C0_9', 'to': 'C1_10', 'weight': 9},
 {'color': 'rgb(255, 204, 204)', 'from': 'C0_9', 'to': 'C0_10', 'weight': 192},
 {'color': 'rgb(255, 188, 188)', 'from': 'C1_9', 'to': 'C2_10', 'weight': 156},
 {'color': 'rgb(255, 26, 26)', 'from': 'C1_9', 'to': 'C1_10', 'weight': 332},
 {'color': 'rgb(255, 204, 204)', 'from': 'C1_9', 'to': 'C0_10', 'weight': 40},
 {'color': 'rgb(255, 188, 188)', 'from': 'C2_9', 'to': 'C2_10', 'weight': 340},
 {'color': 'rgb(255, 26, 26)', 'from': 'C2_9', 'to': 'C1_10', 'weight': 90},
 {'color': 'rgb(255, 204, 204)', 'from': 'C2_9', 'to': 'C0_10', 'weight': 67}],
        type: 'sankey',
        name: 'Name here',
        nodeWidth:3
    }]

});

标签： javascripthighchartssankey-diagram

解决方案

我的同事提出了一个解决方案并且它有效，所以我自己回答了这个问题。它非常简单，直接，可以通过以下 3 个步骤完成。

  1. 找到一种方法来明智地划分所有数据列，如下所示

    { "column1": [ { "color": "rgb(255, 207, 207)", "from": "C0_1", "to": "C0_2", "weight": 638 }, { "color": "rgb(255, 130, 130)", "from": "C0_1", "to": "C1_2", "weight": 164 } ], "column2": [ { "color": "rgb(255, 207, 207)", "from": "C1_1", "to": "C0_2", "weight": 123 }, { "color": "rgb(255, 130, 130)", "from": " C1_1", "to": "C1_2", "weight": 1313 } ] } 等等

  2. 现在根据它们的名称对它们进行排序，该名称基于每列中每个数据点的 from 属性）。

  3. 取第一列中的第一个节点，并从该节点创建点到其他列的每个节点，权重为 0，输出将如下所示。

"column1": [ { "color": "rgb(255, 207, 207)", "from": "C0_1", "to": "C0_2", "weight": 0 }, { "color": " rgb(255, 130, 130)", "from": "C0_1", "to": "C1_2", "weight": 0 } ] 等等。

  1. 现在将这些零权重数据点添加到一个新数组中，然后将第一步中所有已排序的列数据点附加到该数组中，您的桑基图将在所有列上进行排序。希望你得到我在这里试图解释的内容。

推荐阅读