javascript - 桑基 : Display label outside of sankey and provide drag & drop functionality

Question

我需要在桑基图之外显示标签，但我很难在外面显示。我尝试使用一些属性，如裁剪、溢出和对齐。尽管如此，它仍然不起作用。我需要在图表外部显示左侧和右侧的标签。

这是我的代码

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', '直方图', '帕累托', '矢量', 'windbarb', 'treemap', 'bellcurve', 'sma', 'map', 'mapline']