我正在使用HighChats库来显示图形.现在,我在一个"页面"中显示多个系列.如您所见,该页面最重要的是有一个标题.这是一个"通用"标题的所有页面,但我希望每个饼图有自己的标题/图例.我该怎么做(绿色的副标题:派1、派2,等等)?

我不能有4个不同的图表,因为我需要生成PNG/PDF与4个馅饼在一起.一张派的PDF都没有.

enter image description here

以下是我使用的代码:

<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>

推荐答案

试着用副标题代替标题.

如果这不起作用,下面是文档和一个小示例: 要 for each 图表指定单独的标题,只需传递var subtitle = {}中的参数

Basic example:

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

Basic Example

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

Full Example

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

OficialDocumentationLink

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

Javascript相关问答推荐

从外部访问组件变量-Vueejs

为什么promise对js中的错误有一个奇怪的优先级?

如何为我的astro页面中的相同组件自动创建不同的内容?

html + java script!需要帮助来了解为什么我得到(无效的用户名或密码)

如何从URL获取令牌?

如何在模块层面提供服务?

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

删除元素属性或样式属性的首选方法

使用自动识别发出信号(&Q)

使用线性插值法旋转直线以查看鼠标会导致 skip

输入的值的类型脚本array.排序()

与在编剧中具有动态价值的定位器交互

如果对象中的字段等于某个值,则从数组列表中删除对象

为什么这个最小Angular 的Licial.dev设置不起作用?

是否有静态版本的`instanceof`?

输入数据覆盖JSON文件

当达到高度限制时,如何裁剪图像?使用html和css

使用Java脚本替换字符串中的小文本格式hashtag

我如何才能让p5.js在不使用实例模式的情况下工作?