如何可视化一组相同的流？

Question

我有可以解释为从a到b到c的数据

[
  ["hello", "world", "10"],
  ["hello", "world", "10"],
  ["hello", "wazaa", "10"],
  ["bonjour", "wazaa", "30"],
]

同样的流程可以重复(前两个例子)，任何组合都是可能的。

用于显示这些流的图表是parallel-coordinates：始终有相同数量的列，并且可以跟踪每个流(而不是聚合每个输入列的sankey )。

parallel-coordinates的问题是，多个相同的条目将堆叠(我猜)，并且不会出现重复的情况。

是否有一种方法可以更改行的宽度以指示使用了几行相同的数据行？还是提供了将反映在宽度(或最坏情况下是颜色)中的相同条目的计数？

Answer 1

您可以对数据进行预处理，并使用重复数据为系列设置更高的lineWidth值：

var series = [{
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 1, 10]
        },
        {
            data: [1, 1, 30]
        }
    ],
    j = series.length - 1,
    dataLength = series[0].data.length,
    i;

for (; j > 0; j--) {
    i = 0;
    for (; i < dataLength; i++) {
        if (series[j].data[i] === series[j - 1].data[i]) {
            if (i === dataLength - 1) {
                series[j - 1].lineWidth = series[j].lineWidth ?
                    series[j].lineWidth + 1 : 2
                series.splice(j, 1);
            }
        } else {
            i = dataLength;
        }
    }
}

现场演示：https://jsfiddle.net/BlackLabel/4pth15yf/

API：https://api.highcharts.com/highcharts/series.line.lineWidth