Текст SVG исчезает на большой метке

Я использую Morris.js для создания диаграмм. Morris.js использует SVG для рисования графиков. Я создал JSbin здесь: JSbin example Текст SVG исчезает на большой метке

Morris.js использует Raphael для рисования графиков svg. Проблема связана с метками на оси X. Они исчезают, когда размер ярлыков слишком велик. Я потрудился с размером элемента div, содержащего график и размер шрифта для этикеток, но так как ярлыки динамически генерируются для разных пользователей, я не могу принять решение о фиксированном значении. Идеальное решение заключалось бы в том, чтобы текст был обернут. Что можно сделать, чтобы противостоять ситуации? Morris.js использует следующий фрагмент, чтобы создать элемент svg text.

this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);

источник

2013-10-24 Varun Jain

Не уверен, что это решение, но вы всегда можете просто использовать решение типа nameofplace.substr (0,14), применяемое к динамической переменной. – Ian

Кажется, что raphael поддерживает многострочные строки, помещая «\ n» в текст. Это может быть дешевое решение для вас, систематически заменяя «" на «\ n» на ваших ярлыках.

Другой (более сложным) решением было бы заменить элемент «текст» в SVG, порожденную Рафаила иностранным элементом, который позволяет перенос слов:

<foreignObject x="20" y="10" width="150" height="200"> 
    <p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p> 
</foreignObject>

или если вам нужен запасной вариант:

<switch> 
    <foreignObject x="160" y="10" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p></foreignObject> 
    <text x="20" y="20">Your SVG viewer cannot display html.</text> 
</switch>

Я не знаю, как сделать эту замену «текста» посторонним предметом: либо после рендеринга Морриса, либо путем взлома Морриса/Рафаэля.

источник

2013-11-01 17:33:04

Спасибо за супер трюк! Я прочитал спецификацию SVG год назад, но почему-то пропустил это определение тега! К сожалению, Morris lib, вычислить ширину метки и принимает решение рисовать или не рисовать нечетные метки. Поэтому после рендеринга у нас нет шансов «исправить» его, заменив часть тегов html/svg. Но, во всяком случае,

это потрясающе! –

Я думаю, что проблема определения нужно больше разъяснений,

в моем конце кода вы отправили отлично работает, и я копировал то же самое в JSFIDDLE, который также работает отлично ..

Я думаю, что проблема с ярлыком выполняется автоматически, так как я тестировал размер по умолчанию, который вы сохранили, имел ширину 385 пикселей при просмотре CSS и 518px при одинаковом взгляде, как в случае, когда отображаемые метки были разными, на самом деле ярлык, превышающий определенные ширина не была сделана. Так что нет смысла устанавливать стиль и отменять.

Я думаю, что вещи построены в библиотеке. Так что это долгий путь, или изменить библиотеку.

дайте мне знать, какой будет удобным способом, я помогу вам соответственно :)

Edit: Однако, вы можете изменить свойство в GridTextSize: то есть 16 по умолчанию

Fiddle2 здесь я обновил

'gridTextSize: 8', который отображает весь текст в размере 8.

Не совершенным, но будет делать :)

источник

2013-10-29 07:10:27 MarmiK

Изменение размера шрифта не сработает. Пример, который вы установили, имеет «Северная Америка» и «Южная Америка», отсутствующие на моем экране. Я думаю, что это потребует замены библиотеки. –

Да Изменение библиотеки требуется, но это работает, если ширина страницы больше. Это автоматический расчет в библиотеке, который работает как 'min width = Total width/no of Bar. Если размер теста> минимальная ширина (не отображать текстовый узел) ' – MarmiK

Загрузить не минимизированный morris.js с there. В zip-архиве вы можете найти файл morris.js. Откройте в режиме редактирования и изменить значение параметра угла метка по умолчанию (строка 133):

133 |  xLabelAngle: 90,//original value 0

Теперь, если вам действительно это нужно свести к минимуму, вы можете сжать файл с помощью любого интернет-JS сжать инструмент.

источник

2013-11-04 02:56:59

Текст SVG исчезает на большой метке

ответ

Смежные вопросы