javascript
chart.js
шашлык
источник
источник
Вы должны изменить код, например: в chart.Doughnut.defaults
labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"
а затем в функции drawPieSegments
ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);
Смотрите этот пул: https://github.com/nnnick/Chart.js/pull/35
вот скрипка http://jsfiddle.net/mayankcpdixit/6xV78/, реализующая то же самое.
Ни один из других ответов не изменяет размер текста в зависимости от количества текста и размера пончика. Вот небольшой скрипт, который вы можете использовать для динамического размещения любого количества текста посередине, и он автоматически изменит его размер.
Пример: http://jsfiddle.net/kdvuxbtj/
В пончике потребуется любое количество текста, размер которого идеально подходит для пончика. Чтобы не касаться краев, вы можете установить боковые отступы в процентах от диаметра внутренней части круга. Если вы не установите его, по умолчанию будет 20. Вы также можете выбрать цвет, шрифт и текст. Об остальном позаботится плагин.
Код плагина начинается с базового размера шрифта 30 пикселей. Оттуда он проверит ширину текста и сравнит ее с радиусом круга и изменит его размер в зависимости от соотношения ширины круга / текста.
Минимальный размер шрифта по умолчанию составляет 20 пикселей. Если текст выйдет за границы при минимальном размере шрифта, он будет переносить текст. Высота строки по умолчанию при обтекании текста составляет 25 пикселей, но вы можете ее изменить. Если вы установите для минимального размера шрифта по умолчанию значение false, текст станет бесконечно маленьким и не будет переноситься.
Он также имеет максимальный размер шрифта по умолчанию 75 пикселей на случай, если текста недостаточно, а надписи будут слишком большими.
Это код плагина
И вы используете следующие параметры в своем объекте диаграммы
Кредит на @Jenna Sloan за помощь в математике , используемой в этом растворе.
источник
Вот очищенный и объединенный пример вышеуказанных решений - отзывчивый (попробуйте изменить размер окна), поддерживает самовыравнивание анимации, поддерживает всплывающие подсказки
https://jsfiddle.net/cmyker/u6rr5moq/
ОБНОВЛЕНИЕ 17.06.16:
Те же функции, но для chart.js версии 2:
https://jsfiddle.net/cmyker/ooxdL2vj/
источник
Uncaught TypeError: Cannot read property 'extend' of undefined
есть идеи?Я бы избегал модификации кода chart.js для достижения этой цели, поскольку это довольно просто с обычным CSS и HTML. Вот мое решение:
HTML:
CSS:
Результат выглядит так:
источник
Это тоже работает с моей стороны ...
источник
Основываясь на ответе @ rap-2-h, здесь код для использования текста на кольцевой диаграмме на Chart.js для использования на панели инструментов, например. Он имеет динамический размер шрифта для адаптивного варианта.
HTML:
Сценарий:
Вот пример кода. Попробуйте изменить размер окна. http://jsbin.com/wapono/13/edit
источник
Вы можете использовать CSS с относительным / абсолютным позиционированием, если хотите, чтобы он реагировал. Кроме того, он легко справляется с многострочностью.
https://jsfiddle.net/mgyp0jkk/
источник
Это основано на обновлении Cmyker для Chart.js 2. (опубликовано как еще один ответ, поскольку я еще не могу комментировать)
У меня возникла проблема с выравниванием текста в Chrome при отображении легенды, поскольку высота диаграммы не включает ее, поэтому она неправильно выровнена по середине. Исправлено это путем учета этого при вычислении fontSize и textY.
Я вычислил процент внутри метода, а не установленное значение, поскольку у меня их несколько на странице. Предполагается, что ваша диаграмма имеет только 2 значения (иначе каков процент? И что первое - это то, для которого вы хотите показать процент. У меня также есть несколько других диаграмм, поэтому я проверяю type = donut. Я использую пончики только для отображения процентов, так что у меня это работает.
Цвет текста кажется немного удачным и пропущенным в зависимости от того, в каком порядке выполняются вещи и т. Д., Поэтому при изменении размера я столкнулся с проблемой, когда текст менял цвет (между черным и основным цветом в одном случае и вторичным цветом и белым в другом), поэтому Я «сохраняю» существующий стиль заливки, рисую текст (в цвете первичных данных), а затем восстанавливаю старый стиль заливки. (Сохранение старого стиля заливки не кажется необходимым, но вы никогда не знаете.)
https://jsfiddle.net/g733tj8h/
Показать фрагмент кода
источник
Вы также можете вставить код mayankcpdixit в
onAnimationComplete
option:Текст будет отображаться после анимации
источник
save
методаЯ создаю демонстрацию с 7 слайдером jQueryUI и ChartJs (с динамическим текстом внутри)
ДЕМО В JSFIDDLE
источник
Ответы @ rap-2-h и @Ztuons Ch не позволяют
showTooltips
активировать эту опцию, но вы можете создать и наложить второйcanvas
объект позади того, который отображает диаграмму.Важной частью является стиль, требуемый для div и самого объекта холста, чтобы они отображались поверх друг друга.
Вот jsfiddle: https://jsfiddle.net/68vxqyak/1/
источник
@Cmyker, отличное решение для chart.js v2
Одно небольшое улучшение: имеет смысл проверить соответствующий идентификатор холста, см. Измененный фрагмент ниже. В противном случае текст (например, 75%) также отображается в середине других типов диаграмм на странице.
Поскольку легенда (см .: http://www.chartjs.org/docs/latest/configuration/legend.html ) увеличивает высоту диаграммы, значение высоты должно быть получено по радиусу.
источник
Прежде всего, спасибо за выбор Chart.js! Я использую его в одном из моих текущих проектов, и мне он очень нравится - он отлично выполняет свою работу.
Хотя метки / всплывающие подсказки еще не являются частью библиотеки, вы можете взглянуть на эти три запроса на перенос:
И, как Cracker0dks упоминалось, Chart.js использования
canvas
для рендеринга, поэтому вы можете просто реализовать свои собственные всплывающие подсказки, взаимодействуя с ним напрямую.Надеюсь это поможет.
источник
Решение Alesana в целом работает для меня очень хорошо, но, как и другие, я хотел иметь возможность указать, где происходят разрывы строк. Я сделал несколько простых изменений, чтобы переносить строки в символы '\ n', если текст уже переносится. Более полное решение привело бы к принудительному переносу, если в тексте есть какие-либо символы '\ n', но в данный момент у меня нет времени, чтобы заставить это работать с изменением размера шрифта. Изменение также немного лучше центрируется по горизонтали при переносе (избегает конечных пробелов). Код ниже (я пока не могу оставлять комментарии).
Было бы здорово, если бы кто-нибудь выложил этот плагин на GitHub ...
источник