HighCharts：如何将饼图位置与容器的右角或左角对齐答案

【问题标题】：HightCharts: How to align pie chart positions to right or left corner of the containerHighCharts：如何将饼图位置与容器的右角或左角对齐
【发布时间】：2018-08-21 19:45:58
【问题描述】：

如何将 highcharts 中的饼图与容器中的右端或左端对齐？我注意到 center:[] 属性使用百分比工作，但在调整容器大小时会出现一些位置问题。请检查下面的小提琴链接。

fiddle

Highcharts.chart('container', {
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: 'Browser market shares in January, 2018'
},
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: false
        },
        showInLegend: true
    }
},
series: [..]

});

【问题讨论】：

尝试删除“容器”div 的“最大宽度”CSS 属性。
No Vinay 它不能使用 100% 宽度 :(
如下更改您的容器 html 代码。它至少在小提琴中起作用。
由于我的外部容器是可调整大小的，不能固定最小宽度

标签： javascript svg highcharts

【解决方案1】：

您可以为图表使用 style 属性。请看附件示例：

chart: {
    plotBackgroundColor: null,
    width: 200,
    height: 300,
    type: 'pie',
    style: {
        'float': 'right'
    }
},

现场演示：https://jsfiddle.net/BlackLabel/2at3g47f/

API 参考：https://api.highcharts.com/highcharts/chart.style

【讨论】：

这适用于特定的宽度和高度，但如何与 (width:100%, height:100%) 对齐
嗨 fekky Dev，也许翻译 SVG 系列组元素可以完成这项工作？示例：jsfiddle.net/BlackLabel/ux2k4vsw
很好，这行得通，但如果我启用数据标签似乎会出现一些对齐问题
嗨 Fatma elzahraa ，在这种情况下，您还需要翻译 dataLabels 组：jsfiddle.net/BlackLabel/fso4jdta