highcharts 网络图中的图例(Highchart Js)

wnavrhmk  于 2023-10-20  发布在  Highcharts
关注(0)|答案(2)|浏览(126)

我想向用户展示Highchart JS的网络图中哪些节点是某种类型。
例如,红色节点是关于“汽车”的,黑色节点是关于“人”的。
如何在Highchart Js中实现这样的图例?
Here是我的代码。

Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to']
        }
    },
    legend: {
        enabled: true
    },
    series: [{
        showInLegend: true,
        data: [
            ['A', 'B'],
          ['C','D'],
          ['E','F']
        ],
      nodes:[{
        id:'A',
        color:'#ff1000'
      },{
        id:'B',
        color:'#222222'
      },
            {
        id:'C',
        color:'#ff1000'
      },
            {
        id:'D',
        color:'#222222'
      },
        {
        id:'E',
        color:'#ff1000'
      },
            {
        id:'F',
        color:'#222222'
      },]
    }]
});

先谢谢你了。

0yycz8jy

0yycz8jy1#

您是否尝试过将dataLabel添加到series属性并为节点添加名称。

{
      id: "A",
      color: "#ff1000",
      name: "car" <--------- name property
    },

大概是这样的:

series: {
  dataLabels: {
    linkFormat: '',
    enabled: true,
    format: "{point.name}",
    crop: false,
    defer: false,
    useHtml: true,
  },
}

完整示例:
https://codepen.io/tiagotedsky/pen/zYZYOLR

8aqjt8rx

8aqjt8rx2#

现在你可以使用dataClasses来做简单的标记。对于复杂的标记,您可以添加一些类型为bubble的虚拟系列。

相关问题