javascript - 网络图中的图例（Highchart Js）

Question

我想向用户展示哪些节点是 Highchart JS 网络图中的某种类型。

例如，红色节点与“汽车”有关，黑色节点与“人”有关。

如何在 Highchart Js 中实现这样的图例？

这是我的代码笔。

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'
      },]
    }]
});

先感谢您。

标签： javascripthighcharts

Answer 1

您是否尝试过添加dataLabeltoseries属性并向节点添加名称。

   {
      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