Highcharts: Метки данных круговой диаграммы отображаются за пределами холста

У меня тоже есть эта проблема - я думаю, что это должно быть помечено как ошибка, а не улучшение, поскольку программное обеспечение не работает должным образом.

+1 по этому вопросу, можно ли автоматически изменять размер круговой диаграммы в зависимости от меток данных ??

+1

+1 и здесь. Моя компания недавно приобрела лицензию на использование этого программного обеспечения. Исправление этой ошибки было бы большим подспорьем. Кто-нибудь из Highslide может вмешаться или прокомментировать, что здесь происходит? Это было открыто в течение года.

+1. То, что сказал Рэндаллмори - точно такая же ситуация. Кроме того, согласен с rowanmanning, отрубание вещей — это ошибка.

Этот баг был открыт 2 года назад. Какой-либо прогресс? Пиар-диаграммы бесполезны для нас, если этикетки обрубаются.
Он по-прежнему отмечен как улучшение.

Определить пространство, необходимое для меток данных, очень сложно, и мы
не будет придавать ему высший приоритет в настоящее время. Вам необходимо добавить соответствующие
поля и размер круговой диаграммы, чтобы избежать этого. Вы также можете установить стиль ширины
dataLabels для принудительного переноса слов.

+1

У меня тоже есть эта проблема.

это должно быть помечено как ошибка. Улучшение означает, что оно работает правильно, но его можно улучшить, что, очевидно, здесь не так.
+1

эй @highslide-software, будет ли какое-нибудь решение для этого? может ли диаграмма на основе холста быть возможным решением?

+1

+1 У меня тоже такая проблема.

я тоже

Ладно, ребята, я постараюсь придумать решение. Нам нужна какая-то рекурсивная логика, которая рисует метки данных, выясняет, выходят ли они наружу, а затем рекурсивно уменьшает размер круговой диаграммы до тех пор, пока не будут заполнены все метки.

Вот что мы сделали:

• Параметр размера круга по умолчанию изменен на нулевой. Когда размер круговой диаграммы равен нулю, круговая диаграмма автоматически помещается в пределах области графика. Когда метки данных отключены, круговые диаграммы полностью заполняют область графика. Когда метки данных включены, метки данных также размещаются в области графика.
• Параметр центра круговой диаграммы по умолчанию изменен на [null, null]. Центрирование выполняется независимо для опций X и Y. Нуль означает автоматический, поэтому круговая диаграмма будет помещаться внутри области графика, если размер также равен нулю.
• Добавлен параметр minSize. Когда размер равен нулю, он не будет опускаться ниже этого значения.

Демо:

• http://jsfiddle.net/highcharts/CjgLg/ . Возьмите ручку изменения размера в правом нижнем углу, чтобы посмотреть, как обрабатывается авторазмер.
• http://jsfiddle.net/highcharts/9tqSn/ . Как следствие динамического размера, размер самой круговой диаграммы может меняться в зависимости от того, какие метки данных присутствуют. Обратите внимание, как он меняется при отображении и скрытии фрагментов в этой демонстрации.

Все комментарии приветствуются!

У меня есть куча очень длинных меток данных (я не могу сделать их короче), которые, вероятно, приведут к тому, что диаграмма будет абсурдно крошечной. Есть ли способ сделать так, чтобы метки автоматически переносились на две или три строки, если они превышают определенную ширину?

Спасибо!

Да, я думаю, вы можете установить для dataLabels.style.width значение, скажем, «100px».

Большое спасибо за это. Есть ли оценка того, когда это будет объединено в «мастер» или в релиз?

У меня есть случай, когда я показываю несколько круговых диаграмм на одной странице в формате 2x2. Каждая диаграмма имеет одинаковые метки, но разные данные.

Таким образом, это решение может создать 4 пирога разного размера, что нежелательно - есть ли способ избежать этого и при этом сделать метки подходящими? На самом деле я хочу, чтобы метки данных были скорректированы так, чтобы они соответствовали диаграмме, а не круговой диаграмме. Заранее спасибо.

Это будет выпущено и объединено с мастером, когда выйдет Highcharts 3.0, надеюсь, до Рождества.

В случае, когда у вас есть несколько круговых диаграмм на одной диаграмме, вам все равно нужно использовать абсолютный размер. Теоретически, я думаю, то, что вы описываете, может быть решено путем настройки каждого круга, а затем использовать наименьший размер круга для всех из них. Но я не уверен, как это будет работать на практике, так как пироги корректируются в пределах области сюжета, а не относительно друг друга.

@highslide-software Обратите внимание, что приведенные выше примеры не работают из-за CDN для highcharts. Я исправил примеры скрипки для всех, кто в них заинтересован:

http://jsfiddle.net/CjgLg/13/ . Возьмите ручку изменения размера в правом нижнем углу, чтобы посмотреть, как обрабатывается авторазмер.
http://jsfiddle.net/9tqSn/11/ . Как следствие динамического размера, размер самой круговой диаграммы может меняться в зависимости от того, какие метки данных присутствуют. Обратите внимание, как он меняется при отображении и скрытии фрагментов в этой демонстрации.

Спасибо за исправление! +1 :)

У меня проблема с функцией автоматического определения размера пончиков. Он отлично работает для одиночных кругов, но при использовании для круга из двух рядов (т. е. пончика) размеры внутреннего и внешнего кругов изменяются независимо. В частности, когда во внутреннем круге нет паукообразных легенд, а во внешнем круге они есть, размер внутреннего круга вообще не изменяется, а размер внешнего круга действительно изменяется, чтобы соответствовать размеру окна просмотра. В результате получается искаженная диаграмма (обычно внутренний круг становится шире внешнего, что полностью нарушает внешний вид и семантику диаграммы).

Есть ли шанс, что вы расширите это исправление для поддержки пончиков, как единого большого пирога?

Вот пример: http://jsfiddle.net/mmarchetta/34VAT/2/

Круг, который кажется внешним (зеленый/синий), на самом деле является внутренним кругом, а тот, который выглядит внутренним, на самом деле является внешним.

Спасибо!

У меня такая же проблема с кольцевой диаграммой, метки выходят за пределы диаграммы.

Этот случай показывает, как обрезаются метки: http://jsfiddle.net/highcharts/7okk430t/

Я работал над этим и исследовал логику добавления многоточия к переполненным меткам данных. В настоящее время он хорошо работает со статическими диаграммами, но ломается при динамическом изменении размера или обновлении диаграммы.

Живую демонстрацию можно увидеть по адресу http://jsfiddle.net/highcharts/7okk430t/1/.

.. и вот разница:

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

Я попробовал javascript отсюда (http://jsfiddle.net/CjgLg/13/) и получил следующее:

Uncaught TypeError: $(...).resizable не является функцией

Для метода resizable требуется пользовательский интерфейс jQuery.

Ах... импортировал эти 2 (jquery-ui.css и jquery-ui.min.js) и теперь отлично работает, спасибо!

У меня также обрезаются метки данных.

+1 за решение с многоточием, которое будет реализовано в высоких диаграммах.

Почему этот вопрос закрыт? Это было начато в 2011 году, но у меня все еще есть эта проблема в 2017 году.

Это все еще происходит

Я использую версию 5.0.11
И это все еще происходит на кольцевой диаграмме.