web-dev-qa-db-ja.com

円グラフの中央にテキストを配置-Highcharts

HighChartsの円グラフ/ドーナツグラフの中央にタイトルを配置したいと思います。

これを直接有効にするグラフオプションには何も表示されないため、Highcharts SVGレンダラー-chart.renderer.text('My Text', x, y)を使用する必要があると考えています。

私はそれを設定しましたが、テキストをパイの中央に配置することはできません。 xとyの値のパーセンテージは受け入れられないようです。プロット内の中央に配置し、コンテナのサイズ変更に耐えるプログラム的な方法はありますか？

更新：xとyを50％に設定すると、円を中央に配置できます（renderer.circle(x, y, radius)を使用）—テキストを中央に配置しません（ renderer.text(text, x, y)）を使用します。

ここで結果を参照してください： http://jsfiddle.net/supertrue/e2qpa/

svghighcharts
29
supertrue

チャートの位置を考慮する必要があるため、「left」および「top」属性を使用する場合、プロットの幅の半分を追加し、テキスト境界ボックスの幅の半分を差し引くことができます。これにより、正確な中心が得られます。

text = chart.renderer.text("My Text").add();
textBBox = text.getBBox();
x = chart.plotLeft + (chart.plotWidth  * 0.5) - (textBBox.width  * 0.5);
y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.5);
text.attr({x: x, y: y});

最初に追加しない限り、境界ボックスは0になります。

補正：

y = chart.plotTop  + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);

だから、私の元々の考えは、これは問題ないように思えたが、テキストは左上に揃えられるが、代わりに左下に配置されるというものだった。したがって、高さの半分を差し引く代わりに、実際に追加する必要があります。私を混乱させ、私がまだ理解していないことは、センターを取得するために、高さの50％ではなく25％だけを追加することです。注：これはIE 7または8では機能しないようです。

メジャーアップデート

http://jsfiddle.net/NVX3S/2/

<-すべてのブラウザで機能する中央テキスト

この新しい更新では、グラフの作成後にjqueryを使用して新しい要素が追加されます。これは、私がテストしたすべてのブラウザー（IE7、8、9、Firefox、Chromeを含む）で機能します。

var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
var textY = chart.plotTop  + (chart.plotHeight * 0.5);

// The width and height need to be calculated properly, so I made it a span.
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';

$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
35
johnstorm

このコードを使用して、グラフのタイトルを垂直方向に中央揃えします。

title: {
    verticalAlign: 'middle',
    floating: true
}

例

Donut chart with title in the center

編集

バージョン2.1以降、floatingプロパティは documentation として省略できます。これは、verticalAlignプロパティの存在によって暗示されています

値を指定すると、タイトルはフローティングとして動作します。

46
Pavel Chuchuva

最良の解決策は、plotHeightまたはplotWidthの代わりにシリーズの中心に依存することです。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            //innerSize: '60%'
        }
    },
    title: {
        text: ''
    },
    series: [{
        data: [
            ['Firefox', 2262],
            ['IE7', 3800],
            ['IE6', 1000],
            ['Chrome', 1986]
            ]}]
},

function(chart) { // on complete
    var textX = chart.plotLeft + (chart.series[0].center[0]);
    var textY = chart.plotTop  + (chart.series[0].center[1]);

    var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
    span += '<span style="font-size: 32px">Upper</span><br>';
    span += '<span style="font-size: 16px">Lower</span>';
    span += '</span>';

    $("#addText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));
});

作業デモ： http://jsfiddle.net/4dL9S/

8
Paweł Fus

まず、フィドルでhtmlを確認することをお勧めします。コンテナに500ではなく500pxのwidthがありました。

<div id="container" style="height: 400px; width: 500px"></div>​

第二に、このフィドルは少し速くて汚いですが、あなたが望んでいたことを達成すると思いますか？

http://jsfiddle.net/e2qpa/3/

1
mg1075

以下を追加してください。

title: { text : 'title to display in the middle' verticalAlign: 'middle', y: 5 },

1
Kifayat Ullah
var newChart = new Highcharts.Chart(options);

//Set No data text
var textX = newChart.plotLeft + (newChart.plotWidth * 0.5);
var textY = newChart.plotTop + (newChart.plotHeight * 0.3);
var textWidth = 500;
textX = textX - (textWidth / 2);

newChart.renderer.label('<div style="width: ' + textWidth + 'px; text-align: center"><span>Dati non disponibili per questa selezione</span></div>', textX, textY, null, null, null, true)
        .css({
            fontSize: '16px',
        }).add();
0
Giampaolo