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之外显示标签并提供拖放功能

1 个答案: