Highcharts Pie chart如何減少由於繪圖寬度引起的圖表和圖例之間的空間

當圖例位於圖表右側並設置了其佈局時，是否可以減少圖表和圖例之間的空白區域垂直？看起來問題是由於繪圖區域的寬度造成的，因爲圖表總是會變成圓形，這在餅圖中變得不必要的大。無法修復圖表的寬度和高度以實現響應。Highcharts Pie chart如何減少由於繪圖寬度引起的圖表和圖例之間的空間

https://jsfiddle.net/rredondo/gdh86chg/

圖表選項包括：

{ 
    chart: { 
    type: 'pie', 
    plotBorderWidth: 1, 
    plotBorderColor: '#3F4044', 
    borderColor: '#AAAAAA', 
    borderWidth: 2 
    }, 
    series: [{ 
    name: 'Incidents', 
    data: [{ 
     name: "Critical", 
     y: 1, 
     color: "#FF0000" 
    }, { 
     name: "Severe", 
     y: 8, 
     color: "#F57622" 
    }, { 
     name: "Major", 
     y: 13, 
     color: "#F0A401" 
    }, { 
     name: "Minor", 
     y: 25, 
     color: "#F0C801" 
    }, { 
     name: "Information", 
     y: 30, 
     color: "#4AB6FF" 
    }], 
    size: '80%', 
    innerSize: '60%', 
    showInLegend: true, 
    dataLabels: { 
     enabled: false 
    } 
    }], 
    legend: { 
    layout: "vertical", 
    align: "right", 
    verticalAlign: "middle", 
    } 
}

來源

2017-07-19 losaliens

所以你想實現類似於這個圖表的東西？ https://jsfiddle.net/gdh86chg/6/ –

乍一看是，問題在於，當您增加圖表容器的大小時，圖例和實際圖表之間的距離也會增加。 – losaliens

所以你應該可以使用attr（）在圖表加載和重繪時移動圖例：https：//jsfiddle.net/gdh86chg/10/ –

正如我在我的評論中提到，你應該能夠繼續前進圖表負荷你的傳奇，並使用ATTR（）重繪：

http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/chart.events.redraw http://api.highcharts.com/highcharts/Element.attr

// Create the chart 
var updateLegend = function(chart) { 
    var center = chart.series[0].center; 
    console.log(chart.legend) 
    chart.legend.group.attr({ 
    translateX: center[0] + center[2]/2 
    }); 
} 
var chart = Highcharts.chart('container', { 
    chart: { 
    type: 'pie', 
    plotBorderColor: '#3F4044', 
    borderColor: '#AAAAAA', 
    borderWidth: 2, 
    marginRight: 0, 
    marginLeft: 0, 
    events: { 
     load: function() { 
     updateLegend(this) 
     }, 
     redraw: function() { 
     updateLegend(this); 
     } 
    } 
    }, 
    series: [{ 
    name: 'Incidents', 
    data: [{ 
     name: "Critical", 
     y: 1, 
     color: "#FF0000" 
    }, { 
     name: "Severe", 
     y: 8, 
     color: "#F57622" 
    }, { 
     name: "Major", 
     y: 13, 
     color: "#F0A401" 
    }, { 
     name: "Minor", 
     y: 25, 
     color: "#F0C801" 
    }, { 
     name: "Information", 
     y: 30, 
     color: "#4AB6FF" 
    }], 
    size: '80%', 
    innerSize: '60%', 
    showInLegend: true, 
    dataLabels: { 
     enabled: false 
    } 
    }], 
    legend: { 
    layout: "vertical", 
    align: "right", 
    verticalAlign: "middle", 
    } 
});

現場示例：https://jsfiddle.net/gdh86chg/11/

來源

2017-07-20 12:42:55

我也將http://api.highcharts.com/highcharts/Element.attr添加到您的答案。僅僅通過查看API，支持哪些屬性並不是很清楚，所以解決方案對我來說並不明顯。謝謝！ – losaliens

此外，圖例x：-50的屬性不再需要。 – losaliens

感謝您的評論，我編輯了我的答案 –

Highcharts Pie chart如何減少由於繪圖寬度引起的圖表和圖例之間的空間

回答

相關問題