所以我正在使用 HighCharts 創建一個圓環圖。我想根據以下參考影像自定義圖例：
這是我可以生成的影像：
所以第一張影像是參考影像，第二張是我用以下代碼生成的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donut Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style id="compiled-css" type="text/css">
div.g_Container{
position: relative;
width: 1000px;
height: 900px;
}
</style>
</head>
<body>
<div class="g_Container">
<div id="g_one"></div>
</div>
<script>
Highcharts.chart('g_one', {
chart: {
plotBackgroundColor: null,
// spacingLeft: 5,
plotShadow: false,
width: 536,
height: 194,
align: 'left',
// x:-40,
// y:75
},
title: {
text : '',
},
credits: {
enabled: false
},
exporting:{
width: 536,
height: 194,
align: 'left',
// x: -10
},
plotOptions: {
pie: {
slicedOffset: 2,
dataLabels: {
enabled: false,
},
startAngle: 100,
endAngle: 100,
showInLegend : true,
}
},
series: [{
type: 'pie',
// name, percentage of data, color, slicing is need or not//
keys: ['name', 'y', 'color', 'sliced'],
size: 168,
innerSize: 112,
// give data name, percentage the data occupies, color to represent the data//
data: [
['Eateris', 10 ,'#22306b', true],
['General payments', 10, '#000000', true],
['Shoping',10, '#9ca4be', true],
['Travel and Transort', 10, '#e1808b', true],
['Pastimes', 10, '#6d7272', true],
['Family and home', 10, '#6298bf', true],
['Utilities', 10, '#4a548e', true],
['Health and beauty', 10, '#ab4735', true],
['Groceries', 10, '#5e7ab9', true],
['Groups and charity', 10, '#d0d1d0', true],
],
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
horizontalAlign: 'left',
height: 800,
width: 260,
// itemHeight: 50,
itemWidth:90,
itemStyle: {
font: 'Sans Serif Regular',
fontSize: 8,
// paddingBottom: 5
},
labelFormatter: function() {
return '<span style="color: ' this.color '">' this.name '</span>';},
itemHoverStyle: {
color: '#444'
},
symbolHeight: 10,
}
});
</script>
</body>
</html>
我想要實作的是，圖例項之間應該有水平間隙，并且圖例文本應該有 2 列和 5 行。我根據那個給出了寬度，所以圖例被分成兩列。但是在圖例的第二列之后還有很多空間，但是圖例的文本沒有正確出現。提前致謝
uj5u.com熱心網友回復：
基本上，您正在嘗試為底部的圖例添加一些邊距，并且您不希望圖例上的文字換行。
我建議您增加legend.width 的寬度并將legend.itemWidth 設定為其一半以實作您的2 列格式。
現在來到保證金底部
legend.itemMarginBottom可以用來實作它。每個圖例項的像素底部邊距。
默認為 0。
最后文字溢位：
legend.itemStyle.textOverflow : null
元素文本的換行樣式。Highcharts SVG 元素在設定寬度時支持省略號。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donut Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style id="compiled-css" type="text/css">
div.g_Container {
position: relative;
width: 1000px;
height: 900px;
}
</style>
</head>
<body>
<div class="g_Container">
<div id="g_one"></div>
</div>
<script>
Highcharts.chart('g_one', {
chart: {
plotBackgroundColor: null,
// spacingLeft: 5,
plotShadow: false,
width: 536,
height: 194,
align: 'left',
// x:-40,
// y:75
},
title: {
text: '',
},
credits: {
enabled: false
},
exporting: {
width: 536,
height: 194,
align: 'left',
// x: -10
},
plotOptions: {
pie: {
slicedOffset: 2,
dataLabels: {
enabled: false,
},
startAngle: 100,
endAngle: 100,
showInLegend: true,
}
},
series: [{
type: 'pie',
// name, percentage of data, color, slicing is need or not//
keys: ['name', 'y', 'color', 'sliced'],
size: 168,
innerSize: 112,
// give data name, percentage the data occupies, color to represent the data//
data: [
['Eateris', 10, '#22306b', true],
['General payments', 10, '#000000', true],
['Shoping', 10, '#9ca4be', true],
['Travel and Transort', 10, '#e1808b', true],
['Pastimes', 10, '#6d7272', true],
['Family and home', 10, '#6298bf', true],
['Utilities', 10, '#4a548e', true],
['Health and beauty', 10, '#ab4735', true],
['Groceries', 10, '#5e7ab9', true],
['Groups and charity', 10, '#d0d1d0', true],
],
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
horizontalAlign: 'left',
height: 800,
width: 300,
itemWidth: 150,
// itemHeight: 50,
// itemWidth: 90,
itemStyle: {
font: 'Sans Serif Regular',
fontSize: 8,
textOverflow: null,
// paddingBottom: 5
},
labelFormatter: function() {
console.log(this.name)
return '<span style="color: ' this.color '">' this.name '</span>';
},
itemHoverStyle: {
color: '#444'
},
symbolHeight: 10,
itemMarginBottom: 5,
}
});
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/403209.html
標籤：
上一篇：資料表R中日期列的每日平均值
下一篇：根據行條件過濾資料框