Highcharts: Label data diagram lingkaran digambar di luar kanvas

Saya juga mengalami masalah ini - saya pikir ini harus diberi label sebagai bug daripada peningkatan, karena perangkat lunak tidak berfungsi seperti yang diharapkan

+1 pada masalah ini, dapatkah ukuran kue secara otomatis tergantung pada label data ??

+1

+1 di sini juga. Perusahaan saya membeli lisensi untuk menggunakan perangkat lunak ini baru-baru ini. Memperbaiki bug ini akan sangat membantu. Adakah yang bisa di Highslide berpadu dengan prioritas/komentar tentang apa yang terjadi di sini? Ini telah terbuka selama setahun.

+1. Apa yang randallmorey katakan - situasi yang sama persis. Juga, setuju dengan rowanmanning, memotong sesuatu adalah bug.

Bug ini dibuka 2 tahun yang lalu. Adakah peningkatan? Piechart tidak berguna bagi kami jika labelnya terpotong.
Itu masih ditandai sebagai peningkatan.

Mendeteksi ruang yang dibutuhkan untuk label data sangat rumit, dan kami
tidak akan memberikan prioritas utama saat ini. Anda perlu menambahkan yang sesuai
margin dan ukuran pai untuk menghindari hal ini. Anda juga dapat mengatur gaya lebar dari
dataLabels untuk memaksa bungkus kata.

+1

Saya juga mengalami masalah ini.

ini harus ditandai sebagai Bug, Peningkatan berarti berfungsi dengan baik tetapi dapat ditingkatkan yang jelas tidak terjadi di sini.
+1

hai @highslide-software , apakah akan ada solusi untuk ini? dapatkah bagan berbasis kanvas menjadi solusi yang memungkinkan?

+1

+1 Saya juga mengalami masalah ini.

saya juga

Oke guys, saya akan mencoba memberikan solusi. Kami membutuhkan beberapa logika rekursif yang menggambar label data, mencari tahu apakah label tersebut tumpah, kemudian secara rekursif mengurangi ukuran kue sampai semua label masuk.

Inilah yang kami lakukan:

• Mengubah opsi ukuran pai default menjadi nol. Ketika ukuran pai nol, pai secara otomatis dipasang di dalam area plot. Ketika label data dinonaktifkan, pai memenuhi area plot sepenuhnya. Ketika label data diaktifkan, label data juga dipasang di dalam area plot.
• Mengubah opsi pusat pai default menjadi [null, null]. Pemusatan ditangani secara independen untuk opsi X dan Y. Null berarti otomatis, jadi pai akan muat di dalam area plot setiap kali ukurannya juga nol.
• Menambahkan opsi, minSize. Ketika ukurannya nol, itu tidak akan di bawah ini.

Demo:

• http://jsfiddle.net/highcharts/CjgLg/ . Ambil pegangan pengubahan ukuran di kanan bawah untuk mengamati bagaimana ukuran otomatis ditangani.
• http://jsfiddle.net/highcharts/9tqSn/ . Sebagai konsekuensi dari ukuran dinamis, ukuran pai itu sendiri dapat berubah tergantung pada label data apa yang ada. Perhatikan bagaimana perubahannya saat irisan ditampilkan dan disembunyikan di demo ini.

Semua komentar dihargai!

Saya memiliki banyak label data yang sangat panjang (saya tidak bisa membuatnya lebih pendek) yang kemungkinan akan menghasilkan bagan yang sangat kecil. Apakah ada cara untuk membuat label terbungkus otomatis menjadi dua atau tiga baris jika melebihi lebar tertentu?

Terima kasih!

Ya, saya pikir Anda dapat mengatur dataLabels.style.width ke, katakanlah, '100px'.

Terima kasih banyak untuk ini - Apakah ada perkiraan kapan ini akan digabungkan menjadi 'master' atau dalam rilis?

Saya memiliki kasus di mana saya menampilkan beberapa diagram lingkaran pada satu halaman dalam formasi 2x2. Setiap pai memiliki label yang sama tetapi datanya berbeda.

Jadi solusi ini dapat menghasilkan 4 pai dengan ukuran berbeda yang tidak diinginkan - apakah ada cara untuk menghindari ini dan tetap membuat labelnya pas? Sungguh yang saya inginkan adalah label data disesuaikan agar sesuai dengan bagan, bukan kue. Terima kasih di tingkat lanjut.

Ini akan dirilis dan digabungkan menjadi master ketika Highcharts 3.0 keluar, semoga sebelum Natal.

Jika Anda memiliki beberapa pai dalam bagan yang sama, Anda masih perlu menggunakan ukuran absolut. Secara teori, saya pikir apa yang Anda gambarkan dapat diselesaikan dengan menyesuaikan setiap pai, lalu gunakan ukuran pai terkecil untuk semuanya. Tapi saya tidak yakin bagaimana ini akan bekerja dalam praktiknya, karena pai disesuaikan di dalam area plot dan tidak relatif satu sama lain.

@highslide-software Perhatikan contoh di atas tidak berfungsi karena CDN untuk grafik tinggi. Saya telah memperbaiki contoh biola untuk siapa pun yang tertarik dengannya:

http://jsfiddle.net/CjgLg/13/ . Ambil pegangan pengubahan ukuran di kanan bawah untuk mengamati bagaimana ukuran otomatis ditangani.
http://jsfiddle.net/9tqSn/11/ . Sebagai konsekuensi dari ukuran dinamis, ukuran pai itu sendiri dapat berubah tergantung pada label data apa yang ada. Perhatikan bagaimana perubahannya saat irisan ditampilkan dan disembunyikan di demo ini.

Terima kasih untuk perbaikannya! +1 :)

Saya punya masalah dengan fitur ukuran otomatis ini pada donat. Ini bekerja dengan baik untuk pai tunggal, tetapi ketika digunakan pada pai 2-seri (yaitu donat), pai dalam dan luar diubah ukurannya secara independen. Khususnya, ketika pai dalam tidak memiliki legenda seperti laba-laba dan pai luar memilikinya, pai dalam tidak diubah ukurannya sama sekali dan pai luar memang diubah ukurannya agar sesuai dengan viewport. Ini menghasilkan bagan yang terdistorsi (biasanya pai bagian dalam menjadi lebih lebar daripada pai luar, benar-benar merusak tampilan dan semantik bagan).

Apakah ada kemungkinan Anda memperpanjang perbaikan ini untuk mendukung donat juga, sebagai satu kue besar?

Berikut ini contohnya: http://jsfiddle.net/mmarchetta/34VAT/2/

Pai yang tampak di bagian luarnya (hijau/biru) sebenarnya adalah pai bagian dalam, dan yang lebih banyak irisannya yang tampak sebagai bagian dalam sebenarnya adalah bagian luarnya.

Terima kasih!

Saya memiliki masalah yang sama dengan bagan donat, label memanjang keluar dari bagan.

Kasus ini menunjukkan bagaimana label terpotong: http://jsfiddle.net/highcharts/7okk430t/

Saya telah mengerjakan ini dan menjelajahi logika untuk menambahkan elipsis ke label data yang meluap. Saat ini berfungsi dengan baik pada bagan statis, tetapi rusak saat mengubah ukuran atau memperbarui bagan secara dinamis.

Demo langsung dapat dilihat di http://jsfiddle.net/highcharts/7okk430t/1/.

.. dan inilah perbedaannya:

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

Saya mencoba javascript dari sini ( http://jsfiddle.net/CjgLg/13/ ) dan mendapatkan yang berikut:

TypeError Tidak Tertangkap: $(...).resizable bukan fungsi

Metode resizable membutuhkan UI jQuery.

Ah... mengimpor 2 ini (jquery-ui.css dan jquery-ui.min.js) dan berfungsi dengan baik sekarang, terima kasih!

Saya juga memiliki label data yang terpotong.

+1 untuk solusi elipsis yang akan diimplementasikan ke grafik tinggi.

Mengapa masalah ini ditutup? Itu dimulai pada tahun 2011, tetapi saya masih memiliki masalah ini pada tahun 2017.

Ini masih terjadi

Saya menggunakan versi 5.0.11
Dan itu masih terjadi di grafik donat.