javascript Highcharts网络图链接标签显示不一致

9lowa7mx  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(154)

在过去的几天里,我一直在努力与Highcharts网络图Link Labels:
network graph with link label
如屏幕截图所示,所有标签都没有显示。我们还应该看到C点和A点之间的“测试2”。
问题来自javascript箭头函数。每当我删除它时,所有标签都是可以的。
目前,当图形初始化时,所有标签都在这里,但一旦完成就消失了。
所有详细信息均为in JSFiddle here
'Highcharts.chart('容器',{图表:{类型:'网络图',边距顶部:80,背景颜色:'#343a40' //喷泉颜色

},
title: {
    text: 'Network graph',
    style: {
        color: 'white',
    }
},
subtitle: {
    text: 'A Force-Directed Network Graph',
    style: {
        color: 'white',
    }
},
plotOptions: {
    networkgraph: {
        keys: ['from', 'to', 'clabel'],
        layoutAlgorithm: {
            enableSimulation: true,
            integration: 'verlet',  //euler or verlet euler takes into account velocity
            maxIterations:250,
            linkLength: 250
        },
        point: {
            events: { }
        },
        colors: [],
    },
},

series: [{
    id: 'language-tree',
    dataLabels: {
        enabled: true,
        shadow: false,
        bold: false,
        color: 'white',
        style: {textOutline: 'none'},
        allowedOverlap: false, style: {textOutline: false},
        linkFormat:'{point.clabel}', // \u2192 {point.toNode.name}
        y: -16
    },

    // Options for the links
    link: {
        color: 'white', // #9cd4d4 couleur des fleches 89CFF1
        width: 1,
    },

    marker: {
            enabled: true,
            radius: 12
    },

    nodes: [
    {'id': 'A'},
    {'id': 'B'},
    {'id': 'C'},
    ],

    data: [
    ['A', 'B', 'test 1'],
    ['A', 'C', 'test 2'],
    ],

}]

});'任何帮助都将不胜感激!
谢谢
我已经尝试修改highcharts主脚本之前意识到问题是从箭头函数,我不知道如何增强它。我想得到所有的标签显示在每个链接的中间

vojdkbi0

vojdkbi01#

快速和肮脏的解决方案:

.highcharts-label.highcharts-data-label {
  opacity: 1 !important;
}

相关问题