7

すべて同じデータに関連する複数の円グラフを表示する必要があります。そのため、それらすべてを同じチャートの一部にして、個別のシリーズとして実装したいと考えています。

個々の円グラフにラベル/タイトルを付けようとするまで、これはすべて問題なく機能します。グループ全体でのタイトルしか持てないようです。jsfiddleを参照してください

各チャートにタイトルを付ける方法はありますか?

See above jsfiddle for example
4

4 に答える 4

5

私は同じ問題に遭遇し、highcharts サポート フォーラムでこの解決策を見つけました: http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

Highcharts の男は、次の jsfiddle で動作するプラグインを作成しました: http://jsfiddle.net/highcharts/tnSRA/

このプラグインをコピーして、自分のウェブサイトに含めた 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));

そして、これはタイトルを構成する方法です（これをシリーズ要素に入れます）：

title: {
            // align: 'left',
            // x: 0
            // style: { color: XXX, fontStyle: etc }
            text: '<b>Pie 1</b><br>Subtext',
            verticalAlign: 'top',
            y: -40
        },
于 2015-04-21T15:13:26.627 に答える
2

これをさらに改善するために、以下のコードはタイトルの左、中央、および右揃えを正しく処理します。例については、 http://jsfiddle.net/9y4Lj4yr/のfiddle を参照してください。

    /**
* 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));
于 2015-05-20T14:42:16.193 に答える
1

任意の場所にテキストを追加できるレンダラーを使用できます。

http://api.highcharts.com/highcharts#Renderer.text()

于 2013-05-20T11:03:58.207 に答える