Highcharts: 円グラフのデータラベルはキャンバスの外側に描画されます

私もこの問題を抱えています-ソフトウェアが期待どおりに機能しないため、これは拡張機能ではなくバグとしてラベル付けする必要があると思います

この問題の+1、データラベルに応じてパイのサイズを自動的に設定できますか？

+1

ここでも+1。 私の会社は最近、このソフトウェアを使用するためのライセンスを購入しました。 このバグを修正することは大きな助けになります。 Highslideの誰かが、ここで何が起こっているかについて優先順位/コメントを付けてチャイムを鳴らすことができますか？ これは1年間開いています。

+1。 randallmoreyが言ったこと-まったく同じ状況。 また、ナナカマドに同意します。物事を切り刻むのはバグです。

このバグは2年前に開かれました。 何か進展はありますか？ ラベルが切り落とされた場合、Piechartsは私たちにとって役に立たない。
それはまだ拡張としてマークされています。

データラベルに必要なスペースの検出は非常に複雑であり、
現時点では最優先事項ではありません。 適切なものを追加する必要があります
これを回避するための余白と円のサイズ。 の幅のスタイルを設定することもできます
ワードラップを強制するdataLabels。

+1

私もこの問題を抱えています。

これはバグとしてタグ付けする必要があります。拡張機能とは、正しく機能することを意味しますが、ここでは明らかにそうではないため、改善することができます。
+1

ねえ@ highslide-ソフトウェア、これに対する解決策はありますか？ キャンバスベースのチャートは可能な解決策になることができますか？

+1

+1私もこの問題を抱えています。

私もです

さて、皆さん、私は解決策を考え出そうとします。 データラベルを描画し、それらが流出しているかどうかを調べ、すべてのラベルが入るまでパイのサイズを再帰的に縮小する再帰ロジックが必要です。

これが私たちがしたことです：

• デフォルトのパイサイズオプションをnullに変更しました。 円のサイズがnullの場合、円は自動的にプロット領域に収まります。 データラベルが無効になっている場合、円グラフはプロット領域を完全に埋めます。 データラベルを有効にすると、データラベルもプロット領域に収まります。
• デフォルトのパイセンターオプションを[null、null]に変更しました。 センタリングは、XオプションとYオプションで個別に処理されます。 ヌルは自動を意味するため、サイズもヌルの場合は常に円がプロット領域内に収まります。
• オプションminSizeを追加しました。 サイズがnullの場合、これを下回ることはありません。

デモ：

• http://jsfiddle.net/highcharts/CjgLg/ 。 右下のサイズ変更ハンドルをつかんで、自動サイズ設定がどのように処理されるかを確認します。
• http://jsfiddle.net/highcharts/9tqSn/ 。 動的サイズの結果として、パイ自体のサイズは、存在するデータラベルに応じて変化する可能性があります。 このデモでスライスが表示および非表示になると、どのように変化するかに注意してください。

すべてのコメントは大歓迎です！

非常に長いデータラベルがたくさんあり（実際に短くすることはできません）、グラフが非常に小さくなる可能性があります。 ラベルが特定の幅を超えた場合に、ラベルを2行または3行に自動折り返す方法はありますか？

ありがとう！

はい、dataLabels.style.widthを「100px」などに設定できると思います。

これをどうもありがとう-これがいつ「マスター」またはリリースにマージされるかについての見積もりはありますか？

1ページに複数の円グラフを2x2の形式で表示している場合があります。 各パイのラベルは同じですが、データが異なります。

したがって、このソリューションでは4つの異なるサイズのパイが生成される可能性がありますが、これは望ましくありません。これを回避し、ラベルを適合させる方法はありますか？ 本当に欲しいのは、パイではなく、チャートに合うようにデータラベルを調整することです。 よろしくお願いします。

これは、Highcharts 3.0がリリースされたときに、できればクリスマス前にリリースされ、マスターにマージされます。

同じチャートに複数のパイがある場合でも、絶対サイズを使用する必要があります。 理論的には、あなたが説明していることは、各パイを調整し、それらすべてに最小のパイサイズを使用することで解決できると思います。 しかし、パイはプロット領域内で調整されており、相互に関連していないため、これが実際にどのように機能するかはわかりません。

@ highslide-softwareハイチャートのCDNが原因で、上記の例が機能していないことに注意してください。 私はそれらに興味のある人のためにフィドルの例を修正しました：

http://jsfiddle.net/CjgLg/13/ 。 右下のサイズ変更ハンドルをつかんで、自動サイズ設定がどのように処理されるかを確認します。
http://jsfiddle.net/9tqSn/11/ 。 動的サイズの結果として、パイ自体のサイズは、存在するデータラベルに応じて変化する可能性があります。 このデモでスライスが表示および非表示になると、どのように変化するかに注意してください。

修正してくれてありがとう！ +1 :)

ドーナツのこの自動サイズ設定機能に問題があります。 シングルパイには問題なく機能しますが、2シリーズのパイ（ドーナツなど）で使用すると、内側と外側の両方のパイのサイズが個別に変更されます。 特に、内側の円にスパイダーのような凡例がなく、外側の円に凡例がある場合、内側の円はまったくサイズ変更されず、外側の円は実際にビューポートに収まるようにサイズ変更されます。 これにより、グラフが歪んでしまいます（通常、内側の円は外側の円よりも幅が広くなり、グラフの外観とセマンティクスが完全に壊れます）。

この修正を拡張して、ドーナツも1つの大きなパイとしてサポートする可能性はありますか？

次に例を示します： http ：

そこにある外側のパイ（緑/青）は実際には内側のパイであり、内側のように見えるスライスが多いパイは実際には外側のパイです。

ありがとう！

ドーナツチャートでも同じ問題があります。ラベルがチャートの外側に広がっています。

このケースは、ラベルがどのようにクリップされるかを示しています： http ：

私はこれに取り組み、オーバーフローしたデータラベルに省略記号を追加するロジックを検討しました。 現在、静的なグラフではうまく機能しますが、グラフの動的なサイズ変更や更新では機能しません。

ライブデモはhttp://jsfiddle.net/highcharts/7okk430t/1/で見ることができます

..そしてここにdiffがあります：

diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
     * fall within the plot area.
     */
    seriesTypes.pie.prototype.placeDataLabels = function () {
+
+       var chart = this.chart,
+           spacing = chart.spacing;
        each(this.points, function (point) {
            var dataLabel = point.dataLabel,
-               _pos;
+               _pos,
+               overflow,
+               ellipsis;

            if (dataLabel && point.visible) {
                _pos = dataLabel._pos;
                if (_pos) {
+                   
+                   if (dataLabel._attr.align === 'right') {
+                       overflow = _pos.x - dataLabel.width;
+                       if (overflow < spacing[3]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (dataLabel._attr.align === 'left') {
+                       overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+                       if (overflow < spacing[1]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (ellipsis) {
+                       dataLabel._attr.width = dataLabel.width + overflow;
+                       dataLabel.css({
+                           width: dataLabel._attr.width + PX,
+                           textOverflow: 'ellipsis'
+                       });
+                   }
+
                    dataLabel.attr(dataLabel._attr);
                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
                    dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
    opacity: 1,
    // For labels, these CSS properties are applied to the <text> node directly
    textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color', 
-       'lineHeight', 'width', 'textDecoration', 'textShadow'],
+       'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],

    /**
     * Initialize the SVG renderer

ここ（http://jsfiddle.net/CjgLg/13/）からjavascriptを試し、次のようになりました。

Uncaught TypeError：$（...）。resizableは関数ではありません

resizableメソッドにはjQueryUIが必要です。

ああ...これら2つ（jquery-ui.cssとjquery-ui.min.js）をインポートして、正常に動作するようになりました。ありがとうございます。

データラベルも途切れています。

ハイチャートに実装される省略記号ソリューションの+1。

なぜこの問題は解決されたのですか？ 2011年に開始されましたが、2017年もまだこの問題があります。

これはまだ起こっています

バージョン5.0.11を使用しています
そして、それはまだドーナツチャートで起こっています。