highcharts-一个图表中多个饼图系列的图表名称

我需要显示多个饼图，它们都与相同的数据相关。因此，我希望它们都是同一个图表的一部分，并作为单独的系列实现它们

在我尝试将标签/标题放在每个饼图上之前，这些都没有问题。看来我只能在整个团队中拥有一个头衔。看

有没有办法在每张图表上加上标题

See above jsfiddle for example

---

您可以使用渲染器，它允许在任何位置添加文本

---

我遇到了同样的问题，并通过highcharts支持论坛找到了此解决方案：

Highcharts dude编写了一个插件，您可以看到该插件在以下JSFIDLE上工作：

我已经将这个插件复制粘贴到我网站中的highcharts-plugins.js文件中，效果非常好

以下是插件代码：

/**
 * Pie title plugin
 * Last revision: 2012-12-21
 */
(function (Highcharts) {
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {

        var chart = this.chart,
            center = this.center || (this.yAxis && this.yAxis.center), 
            titleOption = this.options.title,
            box;

        proceed.call(this);

        if (center && titleOption) {
            box = {
                x: chart.plotLeft + center[0] - 0.5 * center[2],
                y: chart.plotTop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleOption.text)
                    .css(titleOption.style)
                    .add()
                    .align(titleOption, null, box);
            } else {
                this.title.align(titleOption, null, box);
            }
        }
    });

}(Highcharts));

这就是如何配置标题（将其放入系列元素中）：

标题：{
//对齐：“左”，
//x:0
//样式：{color:XXX，fontStyle:etc}
文本：“饼图1
子文本”，
垂直排列：“顶部”，
y:-40
},

改进Vincent的答案。这就是我在简单文本标题中使用它的方式

extendHighcharts = function(){
        Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {

            //Clear the title if added previously
            //if your chart data does not change, this reference storage for removal can be left out
            if(this.chart.subChartTitleElement){                            
                this.chart.subChartTitleElement[this.id].destroy();
            }   

            proceed.call(this);


            if (this.center && this.options.title) {


                //first, add the title, at center or anywhere, we need the container width to center it
                this.chart.subChartTitleElement[this.id] = this.chart.renderer.text(this.options.title.text,this.center[0],this.center[1]);
                this.chart.subChartTitleElement[this.id].css(this.options.title.style)
                this.chart.subChartTitleElement[this.id].add();

                //Center the title using the container(Bounding Box = BBox) width
                var xCenter = this.chart.plotLeft + this.center[0] - (this.chart.subChartTitleElement[this.id].getBBox().width/2),
                    yCenter = this.chart.plotTop + this.center[1] - 0.6 * this.center[2];

                this.chart.subChartTitleElement[this.id].attr(
                                 {
                                     x:xCenter,
                                     y:yCenter
                                 }
                );

                }
            }); 
     }

用法

---

为了进一步改进这一点，下面的代码正确地处理标题的左对齐、居中对齐和右对齐。有关示例，请参见fiddle at

    /**
* Pie title plugin
* Last revision: 2015-5-20
*/
(function (Highcharts) {
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {

        var chart = this.chart,
        center = this.center || (this.yAxis && this.yAxis.center),
        titleOption = this.options.title,
        box;

        proceed.call(this);

        if (center && titleOption) {
            box = {
                x: chart.plotLeft + center[0] - 0.5 * center[2],
                y: chart.plotTop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleOption.text)
                .css(titleOption.style)
                .add()
            }
            var labelBBox = this.title.getBBox();
            if (titleOption.align == "center")
                box.x -= labelBBox.width/2;
            else if (titleOption.align == "right")
                box.x -= labelBBox.width;
            this.title.align(titleOption, null, box);
        }
    });

} (Highcharts));

---

谢谢，这是唯一的选择吗？我不想绝对定位，你也可以有两个图表是分开的，你能让它工作吗？我被困在同一个问题上，很难为每个馅饼贴上标签。不，我最后不得不创建单独的图表

                    this.chart.addSeries({
                        type: 'pie', 
                        name: 'pie_chart_1',
                        data: pieChartData,
                        center: ['80%','25%'],
                        size: '35%',
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        },

                        //this part adds the relevant information
                        title: {
                            text:'Pie Chart Title',
                            verticalAlign: 'top',
                            y: -40
                        },
                        id:'a_unique_id_or_name'
                    }); 

    /**
* Pie title plugin
* Last revision: 2015-5-20
*/
(function (Highcharts) {
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {

        var chart = this.chart,
        center = this.center || (this.yAxis && this.yAxis.center),
        titleOption = this.options.title,
        box;

        proceed.call(this);

        if (center && titleOption) {
            box = {
                x: chart.plotLeft + center[0] - 0.5 * center[2],
                y: chart.plotTop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleOption.text)
                .css(titleOption.style)
                .add()
            }
            var labelBBox = this.title.getBBox();
            if (titleOption.align == "center")
                box.x -= labelBBox.width/2;
            else if (titleOption.align == "right")
                box.x -= labelBBox.width;
            this.title.align(titleOption, null, box);
        }
    });

} (Highcharts));