javascript - highcharts 中图表的大小
问题描述
我在我的 django 项目中使用 highcharts 创建了饼图。每个饼图位于单独的 div 中,所有 div 的宽度设置为 25%。我使用 for 循环创建了饼图,因此它们都具有相同的属性但饼图不同在大小。这可能是什么原因。这是我的 div 的代码。
var div = document.createElement("div");
div.id = "container"+i;
div.style.cssFloat = "left";
div.style.width="25%"
document.getElementById("main").appendChild(div);
这是我图表的代码
for(i=0;i<res.length;i++)
{
Highcharts.chart('container'+String(i), {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: server[i]
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Success',
data: res[i]
}]
});
}
解决方案
默认情况下,饼图大小会自动调整,以便数据标签有足够的空间进行渲染。这种行为可以通过设置来改变plotOptions.pie.size
- 饼图相对于绘图区域的直径。
代码:
plotOptions: {
pie: {
size: '50%' // Can be a percentage or pixel value
}
}
演示:
- 固定大小:https ://jsfiddle.net/BlackLabel/yptnreda/1/
- 没有固定大小:https ://jsfiddle.net/BlackLabel/zfpd3at7/1/
API参考:
推荐阅读
- java - 尝试从 IntelliJ 运行/调试 Spring Boot 示例时出现异常
- android - 如何使用 Google TextRecognizer 或 Tesseract 在相机帧的子集上执行 OCR
- apostrophe-cms - 错误:uglify 在编译时抛出异常:
- java - 如何在 Jackson CSVMapper 中仅将标题打印到字符串中
- git - Zeppelin + GitHub - 自动推送?
- node.js - 我正在尝试使用 react-app-rewired 来更改文件加载器配置
- javascript - JavaScript:将DIV定位在文本选择上方?
- qliksense - Qlik Sense Set Analysis(A 或 B)和(C 或 D)
- express - 当我尝试通过快递上传文件时访问被拒绝
- scala - 在构造函数scala上使用模式匹配类型不匹配