highcharts - 网络图遇上桑基图
问题描述
有没有办法在 Highcharts 中创建一个网络图,其中连接的宽度与数据系列成比例(如 Sankey 图?)
该应用程序是“交通流”可视化(但在逻辑点之间,而不是物理点之间,因此覆盖在网络图而不是地图上。)
解决方案
默认情况下不支持此功能,但您可以通过对getLinkAttribues
方法进行小的修改轻松获得想要的结果:
H.seriesTypes.networkgraph.prototype.pointClass.prototype.getLinkAttribues = function() {
var linkOptions = this.series.options.link,
maxValue,
pointOptions = this.options;
if (!this.linkWidth) {
this.series.points.forEach(function(p) {
maxValue = maxValue ?
Math.max(maxValue, p.options.value) :
p.options.value;
});
this.series.points.forEach(function(p) {
p.linkWidth = p.options.value * 10 / maxValue;
});
}
return {
'stroke-width': this.linkWidth || 1,
stroke: pointOptions.color || linkOptions.color,
dashstyle: pointOptions.dashStyle || linkOptions.dashStyle
};
}
推荐阅读
- ansible - 在 ansible.builtin.shell 中使用 delta 在 loop_control 标签
- powershell - Invoke-RestMethod 未正确传递有效负载中的 System.Object[] 字段
- php - 如何在for循环中存储多个值?php
- google-app-engine - 尝试执行 get_by_key_name 操作时出现 DeadlineExceededError
- r - 如何禁用 bs4dash (2.0.0.9000) 的dashboardHeader?
- python - 使用 tf.reshape 和 tf.'ValueError: 传递的初始化程序无效' 转换
- r - 具有 corrplot 的非均匀色标
- flutter - Flutter web - 无法将图像上传到 Firebase 存储
- c++ - 在 TCPIP 上禁用 SIM800 RING PIN
- angular - 带有子表单组件的Angular父表单,如何让子知道何时提交父?