我使用Highcharts库来显示图形。现在我在一个“页面”中显示多个系列。正如你所看到的,这个页面上面有一个标题。这是一个“通用”的所有页面的标题,但我希望每个饼图有自己的标题/传奇。我怎么能做到这一点(绿色的副标题:PIE 1、PIE 2等)?
我不能有4个不同的图表,因为我需要生成的PNG/PDF与4饼在一起。没有一个PDF的馅饼。
下面是我正在使用的代码:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$.ajaxSetup({ 'async': false });
var myData = [18, 635, 21, 177, 20, 165, 22, 163, 24, 162, 25, 145, 19, 143,
23, 139, 26, 112, 27, 110, 28, 104, 30, 91, 29, 88, 31, 68, 32,
57, 36, 55, 34, 53, 33, 51, 35, 46, 37, 44, 39, 42, 43];
var mySeries = [];
for (var i = 0; i < myData.length; i++) {
if (i % 2 == 0) {
mySeries.push({
name: "DATO par " + i,
y: myData[i],
sliced: true,
selected: true
});
}
else
mySeries.push(["DATO " + i, myData[i]]);
}
Highcharts.setOptions({
lang: { //Cambiamos el texto de las opciones
downloadPNG: "Descargar PNG",
downloadPDF: "Descargar PDF"
}
});
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
height: 700
},
title: {
text: 'Informe Estadístico',
align: 'left'
},
subtitle: {
text: 'Periodo: 01/01/2023 - 31/03/2023',
align: 'left'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadPNG", "downloadPDF"]
}
},
sourceWidth: 900
},
//exporting: { enabled: false }, -> lo quita todo
series: [
//Grafica 1
{
size: 250,
center: [200, 150],
type: 'pie',
name: 'Porcentaje',
description: 'PIE 1', //NO USE :(
data: mySeries
},
//Grafica 2
{
size: 250,
center: [650, 150],
type: 'pie',
name: 'Share',
data: [
['Samsung', 23],
['Apple', 18],
{
name: 'Xiaomi',
y: 12,
sliced: true,
selected: true
},
['Oppo*', 9],
['Vivo', 8],
['Others', 30]
]
},
//Grafica 3
{
size: 250,
center: [200, 450],
type: 'pie',
name: 'Share',
data: [
['Samsung', 23],
['Apple', 18],
{
name: 'Xiaomi',
y: 12,
sliced: true,
selected: true
},
['Oppo*', 9],
]
},
//Grafica 4
{
size: 250,
center: [650, 450],
type: 'pie',
name: 'Share',
data: [
['Apple', 18],
{
name: 'Xiaomi',
y: 12,
sliced: true,
selected: true
},
['Oppo*', 9],
['Vivo', 8]
]
}
]
});
});
</script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
<i>*OPPO includes OnePlus since Q3 2021</i><br/><br/>
Chart demonstrating the use of a 3D pie layout.
</p>
</figure>
</asp:Content>
2条答案
按热度按时间fbcarpbf1#
尽量用副标题代替标题。
如果这不起作用,这里是文档和一个小例子:要为每个图表给予单独的标题,只需传递
var subtitle = {}
中的参数基本示例:
基本示例
https://jsfiddle.net/SeiryuV/4txy0rcf/2/
完整示例
https://jsfiddle.net/SeiryuV/4txy0rcf/68/
官方文档链接
https://www.highcharts.com/demo/highcharts/line-ajax
j8ag8udp2#
Highcharts没有添加多个图例的选项,为每个饼图添加单独的图例和标题的最明智的解决方案是使用
setOptions()
方法创建具有公共选项的单独图表。Demo:https://jsfiddle.net/BlackLabel/pq3odaw2/
API:https://api.highcharts.com/highcharts/plotOptions.series.showInLegend