javascript - 为多个系列创建多个 Pie Highcharts
问题描述
我正在尝试使用 JSON 数据绘制高图。我的数据有多个系列。因此,创建了 2 个饼图相互重叠。有没有办法让我画出多个相邻的图表?
我的 JSON、代码和饼图的工作示例相互重叠:
let data = [{
"name": "cakes",
"data": [
[
"us",
149045
],
[
"es",
41746
],
[
"uk",
37640
],
[
"au",
16594
]
],
"marker": {
"symbol": "circle"
}
}, {
"name": "pie",
"data": [
[
"us",
128845
],
[
"es",
35752
],
[
"uk",
32246
],
[
"au",
14333
]
],
"marker": {
"symbol": "circle"
}
}]
Highcharts.chart('container', {
chart: {
type: 'pie',
zoomType: 'xy'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
// format: '{series.data[0]} <b>{point.percentage:.1f}%</b>'
}
},
},
series: data
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
如何让饼图彼此相邻,而不是一个在另一个之上?一为cakes
一为pies
?
解决方案
您可以使用动态计算的样式创建多个图表:
data.forEach(function(dataEl) {
const createdDiv = document.createElement('div');
createdDiv.style.display = 'inline-block';
createdDiv.style.width = 100 / data.length + '%'
mainContainer.appendChild(createdDiv);
Highcharts.chart(createdDiv, {
...,
series: [dataEl]
});
});
现场演示: https ://jsfiddle.net/BlackLabel/jn4p2gq8/
或者一个图表,center
每个系列都有动态计算的属性。
API 参考: https ://api.highcharts.com/highcharts/series.pie.center
推荐阅读
- java - 如何在 Eclipse 中将外部 TXT 和 XML 资源包含到 Runnable Jar 导出中?
- python - 使用Python进行网络抓取时如何删除熊猫数据框中的字符?
- r - 基于函数在我的数据框中创建一个新列
- python - 如何使 python 的 str.maketrans() 函数不区分大小写?
- pandas - 将列变量传递给 Pandas 函数
- drag-and-drop - Adobe Captivate - 拖放
- sql - 解析 JavaScript 对象以更新 PostgreSQL 表
- makefile - 在 make 命令行中构建多个目标
- vue.js - nuxtServerInit 不接收身份验证 cookie
- javascript - 在 PHP 中使用 JS 更改类属性