how to set the center point and radius of a pie chart so that the center point is in the top left corner, or so that the pie chart fills the entire plot area; When setting the center of a pie chart to 0, if the chart is not positioned exactly in the top left corner but has a slight distance from it; When I set the size to 100%, the chart still does not fill the page; I tried setting spacing and margin, but it did not achieve the desired effect
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HighChart-3D饼图</title>
</head>
<!-- 1.通过CDN的方式引入HighChart -->
<script src="https://code.hcharts.cn/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<!-- 暂时没用到 -->
<!-- <script src="https://code.highcharts.com/stock/highstock.js"></script> -->
<body>
<!-- 2.创建容器 -->
<!-- margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -->
<div id="container" style="width: 900px;height:600px;background-color: #ccc;"></div>
<script>
// Set up the chart
const option = {
"plotOptions": {
"pie": {
"innerSize": "50%",
"cursor": "pointer",
"depth": 44.25,
// "startAngle": 0,
"size": "100%",
"slicedOffset": 30,
"center": [
"0%",
"0%"
],
"allowPointSelect": false,
"showInLegend": true,
"point": {
"events": {}
}
}
},
"exporting": {
"enabled": false
},
"credits": {
"enabled": false
},
"legend": {
"layout": "vertical",
"verticalAlign": "top",
"symbolHeight": 12,
"backgroundColor": "transparent",
"itemStyle": {
"fontFamily": "微软雅黑",
"color": "rgba(0,0,0,1.00)",
"fontSize": 12,
"fontStyle": "normal",
"fontWeight": "normal"
},
"align": "right",
"squareSymbol": false,
"symbolWidth": 24,
"enabled": false,
"symbolRadius": 3
},
"series": [
{
"dataLabels": {
"distance": 30,
"useHTML": true,
"style": {
"fontFamily": "微软雅黑",
"color": "rgba(26,26,26,1.00)",
"fontSize": "12px",
"fontStyle": "normal",
"fontWeight": "normal"
},
"enabled": false //change true -> false
},
"data": [
{
"sliced": false,
"color": "rgba(101,145,249,1.00)",
"name": "河北",
"y": 15989599.2,
"attributes": {
"MAINDIMMEMBER_NAMECOLUMN": "河北",
"MAINDIMMEMBER_KEYCOLUMN": "130000",
"MAINDIM_NAMECOLUMN": "DWMC",
"MAINDIM_KEYCOLUMN": "DWBM",
"DRILL_DOWN": "false"
}
}
]
}
],
"tooltip": {
"backgroundColor": "rgba(50,50,50,1.00)",
"borderColor": "rgba(50,50,50,1.00)",
"useHTML": true,
"style": {
"fontFamily": "微软雅黑",
"color": "rgba(255,255,255,1.00)",
"fontSize": "12px",
"fontStyle": "normal",
"fontWeight": "normal"
}
},
"title": {
"style": {
"fontFamily": "微软雅黑",
"color": "rgba(34,34,34,1.00)",
"fontSize": "14px",
"fontStyle": "normal",
"fontWeight": "normal"
},
"text": ""
},
"chart": {
"options3d": {
"alpha": 45,
"enabled": "true"
},
// "margin": [
// 0,
// 0,
// 0,
// 0
// ],
"backgroundColor": "transparent",
// "spacing": [
// 0,
// 0,
// 0,
// 0
// ],
"type": "pie",
"events": {}
}
}
const chart = new Highcharts.Chart("container", option);
</script>
</body>
</html>