Highcharts:多个饼图,每个都有自己的标题/图例

sxpgvts3  于 2023-10-20  发布在  Highcharts
关注(0)|答案(2)|浏览(160)

我使用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>
fbcarpbf

fbcarpbf1#

尽量用副标题代替标题。
如果这不起作用,这里是文档和一个小例子:要为每个图表给予单独的标题,只需传递var subtitle = {}中的参数

基本示例:

var subtitle = {
  text: 'TestTitleGraphic',
  align: 'center',
  verticalAlign: 'bottom'
};

基本示例

https://jsfiddle.net/SeiryuV/4txy0rcf/2/

完整示例

https://jsfiddle.net/SeiryuV/4txy0rcf/68/

官方文档链接

https://www.highcharts.com/demo/highcharts/line-ajax

j8ag8udp

j8ag8udp2#

Highcharts没有添加多个图例的选项,为每个饼图添加单独的图例和标题的最明智的解决方案是使用setOptions()方法创建具有公共选项的单独图表。

Demohttps://jsfiddle.net/BlackLabel/pq3odaw2/
APIhttps://api.highcharts.com/highcharts/plotOptions.series.showInLegend

相关问题