【问题标题】:Network chart nodes relation nodes merging -> highcharts网络图节点关系节点合并 -> highcharts
【发布时间】:2019-02-06 15:37:44
【问题描述】:

我正在研究网络图高图 每个节点都应该有一个新的子节点,但如果它具有相同的名称,则不应与另一个子节点合并,例如 child1,child2,child3,指向 subchild1,对于每个个体,我们应该让单个节点指向每个节点

fiddle 链接 -> https://jsfiddle.net/GnanaSagar/36k2wmry/1/

【问题讨论】:

  • 嗯....我想subchild1.1 可能是一个足够好的解决方法?
  • 但根据我的要求,子子项不可能在几乎所有时间都相同,但不应合并

标签: javascript jquery highcharts


【解决方案1】:

您还可以将formatter 函数用于数据标签:

series: [{
    dataLabels: {
        enabled: true,
        format: undefined,
        formatter: function() {
            if (this.key.indexOf('subchild') >= 0) {
                return 'subchild1'
            }
            return this.key
        }
    },
    data: [...,
        {
            from: 'child1',
            to: 'subchild1'
        },
        {
            from: 'child2',
            to: 'subchild2'
        },
        {
            from: 'child3',
            to: 'subchild3'
        }
    ]
}]

现场演示:https://jsfiddle.net/BlackLabel/n4gd8v3r/

API:https://api.highcharts.com/highcharts/series.networkgraph.dataLabels.formatter

【讨论】:

  • 谢谢,我可以根据级别为节点放置图标吗,级别 1 应该有一个图标,级别 2 应该有另一个类似的图标
  • 嗨,Gnana,我很高兴能帮上忙。要为每个级别设置不同的marker 选项,您应该使用nodes,例如@AVAVT 的解决方案:jsfiddle.net/y96u2cmj
  • 是否有可能不使用 subchild1.1 等,因为我从 java 获取值,所以我无法预测值,所以如果我有 'n' 级别并且如果我们有两个节点有指向单个节点的相同值我想要两个具有相同值的节点分别指向。
  • @Gnana,必须使用单独的to 值,但您可以在创建图表之前转换数据。如果您能向我提供您的示例数据,我可以为您提供帮助。
【解决方案2】:

显然series.networkgraph.nodes 有效。

series: [{
    dataLabels: {
      enabled: true
    },
    data: [
            {from: 'parent', to: 'child1'},
            {from: 'parent', to: 'child2'},
            {from: 'parent', to: 'child3'},
            {from: 'child1', to: 'subchild1.1'},
            {from: 'child2', to: 'subchild2.1'},
            {from: 'child3', to: 'subchild3.1'}
    ],
    nodes: [{
        id: 'subchild1.1',
        name: 'subchild1'
      },
      {
        id: 'subchild2.1',
        name: 'subchild1'
      },
      {
        id: 'subchild3.1',
        name: 'subchild1'
      }
    ]
  }]

jsFiddle:https://jsfiddle.net/9g42nqza/(我必须注释掉你的一些原始代码,因为它会抛出错误)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-13
    • 1970-01-01
    • 1970-01-01
    • 2021-07-20
    • 2015-01-05
    • 1970-01-01
    相关资源
    最近更新 更多