Sankey：在 sankey 之外显示标签并提供拖放功能

Question

我需要在 Sankey 图之外显示标签，但我很难在外面显示。我尝试使用一些属性，如裁剪、溢出和对齐。尽管如此，它还是行不通。我需要在图形外显示左侧和右侧的标签。

这是我的代码

Highcharts.chart('container', {

    chart: {
        showAxes: true,
        marginLeft: 150,
    },
    title: {
        text: ''
    },
    xAxis: {
        visible: false,
    },
    yAxis: {
        visible: false
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Cricket is the game', 'Sport Fest', 463 ],
            ['Football is the game', 'Sport Fest', 338 ],
            ['Basketball is the game', 'Sport Fest', 317],
            ['Baseball is the game', 'Sport Fest', 130 ],
        ],
        type: 'sankey',
    }],
     plotOptions: {
      sankey: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          align: 'right',
          crop: false,
          overflow: "none",
        }
      }
    },
})

我面临的第二个问题是我需要提供拖放功能，但我不明白为什么拖放功能不起作用。我参考了这个link

Highcharts.chart('container', {

    chart: {
        showAxes: true,
        marginLeft: 150,
    },
    title: {
        text: ''
    },
    xAxis: {
        visible: false,
    },
    yAxis: {
        visible: false
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Cricket is the game', 'Sport Fest', 463 ],
            ['Football is the game', 'Sport Fest', 338 ],
            ['Basketball is the game', 'Sport Fest', 317],
            ['Baseball is the game', 'Sport Fest', 130 ],
        ],
        dragDrop: {
                draggableX: true,
                draggableY: true,    
            },
        type: 'sankey',
    }],
     plotOptions: {
      sankey: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          align: 'right',
          crop: false,
          overflow: "none",
        }
      }
    },
});

Answer 1

要在绘图区域外显示标签，可以操作标签align 属性:

    events: {
        load() {
            Highcharts.each(this.series[0].nodeColumns[0], function(el) {
                el.dataLabel.attr({
                    align: 'right'
                });
            });
        }
    }

现场演示：https://jsfiddle.net/BlackLabel/6nsxzhLg/

这些系列类型不支持拖放功能：

['gauge', 'pie', 'sunburst', 'wordcloud','sankey', 'histogram', 'pareto', 'vector', 'windbarb', 'treemap', 'bellcurve', 'sma', 'map', 'mapline']

Sankey：在 sankey 之外显示标签并提供拖放功能

Sankey: Display label outside of sankey and provide drag & drop functionality

javascript

highcharts

sankey-diagram