highcharts-一个图表中多个饼图系列的图表名称 [英] highcharts - chart names for multiple pie chart series in one chart

问题描述

我需要显示所有与同一数据相关的多个饼图.因此，我希望它们全部成为同一图表的一部分，并将其实现为单独的系列.

I need to display multiple pie charts that are all related to the same data. As such I want them all to be part of the same chart and implement them as individual series.

在我尝试在每个饼图上放置标签/标题之前，所有这些都没有问题.看来我只能在整个小组中有一个头衔.参见 jsfiddle

This all works no problems until I tried to put labels/titles over each individual pie chart. It seems that I can only have a title over the entire group. See jsfiddle

有没有办法在每个图表上显示标题?

Is there any way to have the titles over each chart?

See above jsfiddle for example

推荐答案

我遇到了同样的问题，并通过highcharts支持论坛找到了该解决方案: http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

I encountered the same problem, and found this solution via highcharts support forum : http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

Highcharts花花公子已经编写了一个插件，您可以看到它在以下jsfiddle上工作: http://jsfiddle.净/高图表/tnSRA/

The Highcharts dude has written a plugin that you can see working on the following jsfiddle : http://jsfiddle.net/highcharts/tnSRA/

我已将该插件复制粘贴到我包含在我的网站中的highcharts-plugins.js文件中，工作原理很简单！

I have copy-pasted this plugin in a highcharts-plugins.js file that I included in my website, works like a charm!

这是插件代码:

/**
 * 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));

这就是您配置标题的方式(将其放入系列元素中):

And this is how you configure your title (put this in your series elements) :

title: {
            // align: 'left',
            // x: 0
            // style: { color: XXX, fontStyle: etc }
            text: '<b>Pie 1</b><br>Subtext',
            verticalAlign: 'top',
            y: -40
        },

这篇关于highcharts-一个图表中多个饼图系列的图表名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！