Question

我无法正确地从正确的情节边界缩进传奇

我的配置

Highcharts.chart('container', {
                    chart: {
                        type: 'pie',
                        plotBackgroundColor: null,
                        plotBorderWidth: 1,
                        plotShadow: false,

                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true,
                            center: [150, 150],
                        },
                        column: {
                            stacking: 'percent'
                        }
                    },
                    tooltip: {
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.2f}%)<br/>',
                        shared: true
                    },

                series: [{

                    name: "My plot",
                    type: 'pie',
                    innerSize: '70%',
                    data: [ ['item',4],['item2',50],['item3',8]]

                }],
                title: {
                    text: "My chart"
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth:1,

                },
});

http://jsfiddle.net/69d1d22x/

我想我需要将传奇左对齐并将其向右移动，但我确实找不到任何黑客。

Answer 1

您是否尝试过限制图表宽度尺寸？

喜欢：

(...)
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false,
width: 450,
(...)

示例：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/width/

Answer 2

您可以使用chart.marginRight为图表提供正确的边距。使用此代码将图例放在旁边（假设legend.align等于'right'）：

function alignLegend(chart) {
  var group = chart.legend.group;
  group.attr({
    translateX: chart.plotLeft + chart.plotWidth + chart.plotBox.x
  });
}

将此功能放在load和redraw个事件中。

实时工作示例： http://jsfiddle.net/kkulig/cthaLrb3/

API参考：

Highchart pie垂直图例右对齐未固定以正确绘制

2 个答案: