C3: Экспорт этой удивительной диаграммы

Привет ,

Диаграммы C3 - лучшие доступные диаграммы. Я не могу поверить, насколько легко создать любую диаграмму.

Единственное, как мне экспортировать диаграмму?

Пожалуйста, помогите мне в этом отношении.

Благодарю.

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

Это не так просто сделать только на Javascript, особенно если вы хотите поддерживать множество версий браузеров. Если браузер поддерживает холст (все современные браузеры поддерживают), есть довольно простой способ. Вы можете использовать библиотеку canvg (https://code.google.com/p/canvg/), которая преобразует SVG в холст.
Затем что-то вроде этого (http://www.nihilogic.dk/labs/canvas2image/), чтобы пользователь мог сохранить его как файл изображения локально. Я сам этого не пробовал, поэтому не могу сказать, надежно ли это работает с графиками C3. Но это направление для изучения.

Привет, я считаю, что это может быть полезно (http://jsfiddle.net/8ypxW/3/), но я пока не добился успеха.
Я пытаюсь поместить нашу диаграмму C3 (тег div) в исходный код (тег span), но в результате я получаю пустое изображение !!!
Обновление: http://jsfiddle.net/panubear/mGDt8/ >> Выходное изображение было создано без диаграммы c3.

Я делаю это для построителя диаграмм на основе C3, над которым я работаю, поделюсь своим кодом, когда он будет готов. Согласен с точкой зрения @lblb о canvg, это то, что Quartz использует в своем ChartBuilder. Чтобы узнать, как это сделать, помимо вывода PNG, см .: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

Хорошо, все заработало. Вот моя директива Angular для этого , бесстыдно взятая из Quartz / Chartbuilder . Игнорируйте все, что связано с Angular, вся реальная работа выполняется в createChartImages() .

Короче, вот что мне нужно было сделать:

1. Создайте пустой элемент canvas .
2. Возьмите все стили из c3.js и сделайте их встроенными в большинство элементов SVG, стараясь не делать этого ни с одним из ваших связанных с данными объектов (которые окрашены с помощью атрибута стиля CSS. Строка 6 c3.css будет замените любые цвета строки данных, установленные через C3, на stroke: #000 и fill: none .).
3. Найдите все элементы, у которых есть «скрытые» для свойства «видимость» CSS, и установите для них значение «display: none». Это скрывает все неиспользуемые оси C3.
4. Установите fill: none на всех путях данных SVG, чтобы они не получали странный эффект отсечения Безье.
5. Используя Canvg ,

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

Изменить: похоже, что типы "области" полностью нарушают вывод PNG, хотя вывод SVG кажется нормальным. Я исправил это, поэтому вывод SVG работает для всех типов диаграмм, AFAIK.

Последнее изменение: я обновил Gist, теперь он должен работать для всех типов диаграмм, как PNG, так и SVG. в надежде выпустить LlamaCharts когда-нибудь в ближайшие несколько дней, если кому-то понадобится работающая реализация.

Привет @aendrew

Я работал над экспортером, который поддерживает .png , .jpeg , .gif и .pdf . пожалуйста, посмотрите мой запрос на перенос здесь

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

@yuvii Привет! Я выпустил свой проект (наверное, следовало обновить этот выпуск ...), иногда это / axisJS .

Вы можете поиграть с ним онлайн на http://times.github.io/axisJS/

PDF очень полезен, взгляните на ваш PR. Вскоре мне понадобятся форматы печати для axisJS ...

Ого, вы действительно пошли дальше и сделали для этого целый графический интерфейс. Я только что сделал инструмент командной строки для экспорта. Очень здорово, чувак.

На данный момент это скорее проблема поддержки, чем что-либо подобное завершению. Инструмент командной строки перенос , # 555.

Любой, кто доходит до этого, реализация здесь делает то же, что и я с Angular, но с jQuery - может быть более простым примером, чем тот, который я привел!

Привет, я пытаюсь преобразовать диаграмму c3, т.е. SVG, в изображение, но не работает.
Похоже, что c3.css, который является внешним css, не применяется.
Как мы можем применить внешний CSS к SVG

@ raj-mehta Спросите в группе C3 Google , это закрытая проблема, и отсутствие подробностей, которые вы предоставили в своем запросе, делает практически невозможным вам помочь.

Спасибо за возврат,
Я использовал следующий svg и использовал ur sample.html, но диаграмма в браузере и преобразованное изображение из canvg не совпадают.

У меня та же проблема, что и у raj-mehta, с очень широкими осями. Вы нашли решение этого?

Проблема в том, что при экспорте имеют значение только встроенные стили. Я изменил свою локальную версию c3, чтобы включить некоторые дополнительные стили (например, fill-opacity: 0 для линейных графиков, которые показывают странный черный фон), и изображение выглядит так, как вы ожидаете.

@aendrew, скажите, пожалуйста, источник этого http://times.github.io/axisJS/#/, мне нужен этот учебник ... пожалуйста, помогите мне

Вы можете добавить функцию экспорта PNG в диаграммы c3, используя мой модуль: https://github.com/annatomka/ng-c3-export

Привет, @annatomka, могу ли я использовать https://github.com/annatomka/ng-c3-export с асинхронными графиками загрузки? Мой код:

app.controller ("ChartController", функция ($ http) {
$ http.get ('URL').
успех (функция (данные, статус, заголовки, конфигурация) {
c3.generate ({
bindto: "# Моя-диаграмма",
данные: {
тип: 'пирог',
столбцы: [
['образец', 30],
['sample2', 200]
]
}
});
}).
ошибка (функция (данные, статус, заголовки, конфигурация) {
отладчик;
});

- Рисует диаграмму правильно, но нет значка загрузки

@annatomka Отличный модуль, но у меня также возникают проблемы с асинхронной загрузкой графиков. Кнопка загрузки исчезает, когда я заново генерирую график.

@annatomka Как хорошо! Я полностью использую ваш модуль в следующем проекте Angular, который я использую!

@annatomka +1

@ morales-franco @johnmarkli Я исправил проблему с асинхронной загрузкой, вы можете попробовать ее в новой версии (0.1.5). Я тоже добавил несколько примеров.

@annatomka Моя круговая диаграмма

что мне не хватает в css?

@annatomka Отличный модуль, но у меня тоже проблемы с браузерами. Он не работает в вашем модуле Internet Explorer. Не могли бы вы исправить ошибку? благодаря

Серьезно, люди. Если у вас есть проблемы с annatomka / ng-c3-export, сообщите о них в очереди задач annatomka / ng-c3-export .

Блокирующая нить.