C3: Exportando este gráfico incrível

Oi ,

Os gráficos C3 são os melhores gráficos disponíveis. Não acredito como é fácil gerar qualquer gráfico.

A única coisa é como faço para exportar um gráfico?

Por favor me ajude com este respeito.

obrigado.

Também estou tentando exportar o gráfico para pdf ou quero convertê-lo em imagem ... se alguém tiver uma ideia, por favor me ajude

Não é tão fácil fazer apenas em Javascript, especialmente se você deseja oferecer suporte a várias versões de navegador. Se o navegador suportar canvas (todos os navegadores modernos o fazem), existe uma maneira bastante fácil. Você pode usar a biblioteca canvg (https://code.google.com/p/canvg/), que converte SVG em canvas.
Então algo como isto (http://www.nihilogic.dk/labs/canvas2image/) para permitir ao usuário salvá-lo como arquivo de imagem localmente. Eu mesmo não tentei, então não posso dizer se funciona de forma confiável com gráficos C3. Mas esta é uma direção a explorar.

Olá, acho que isso pode ser útil (http://jsfiddle.net/8ypxW/3/), mas ainda não obtive sucesso.
O que eu tento é colocar nosso gráfico C3 (tag div) dentro do código original (tag span), mas o resultado do download que obtenho é uma imagem vazia !!!
Atualização: http://jsfiddle.net/panubear/mGDt8/ >> A imagem de saída foi produzida sem gráfico c3.

Estou fazendo isso para o construtor de gráfico baseado em C3 no qual estou trabalhando, compartilhará meu código quando estiver pronto. Concordou com @lblb 's ponto sobre canvg, isso é o uso de quartzo em sua ChartBuilder. Para ter uma ideia de como fazer isso, além de gerar PNGs, consulte: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

Ok, coloquei isso funcionando. Aqui está minha diretiva Angular para fazer isso , muito descaradamente tirada do Quartz / Chartbuilder . Ignore todas as coisas do Angular, todo o trabalho real é feito em createChartImages() .

Resumindo, aqui está o que eu precisava fazer:

1. Crie um elemento canvas vazio.
2. Pegue todos os estilos de c3.js e torne-os embutidos na maioria dos elementos SVG, tomando cuidado para não fazer isso com nenhum de seus objetos relacionados a dados (que são coloridos por meio do atributo de estilo CSS. A linha 6 de c3.css substitua quaisquer cores de linha de dados definidas via C3 por stroke: #000 e fill: none .).
3. Encontre quaisquer elementos que tenham "ocultado" para a propriedade CSS "visibilidade" e defina-os como "display: none". Isso oculta todos os eixos não usados ​​do C3.
4. Defina fill: none em todos os caminhos de dados SVG para que você não obtenha o estranho efeito de recorte Bézier.
5. Usando Canvg , gere um PNG. Também existe uma função para gerar um SVG na minha diretiva, usando um snippet do NYT.

Nota Eu só testei isso com gráficos de série simples, é muito possível que os outros tipos de gráfico tenham problemas e precisem de seus próprios ajustes específicos.

Edit: Parece que os tipos de "área" quebram totalmente a saída PNG, embora a saída SVG pareça boa. Eu corrigi para que a saída SVG funcione para todos os tipos de gráfico, AFAIK

Última edição: atualizei o Gist, ele deve funcionar para todos os tipos de gráfico agora, PNG e SVG. na esperança de lançar o LlamaCharts nos próximos dias se alguém quiser uma implementação funcional para brincar.

Oi @aendrew

Tenho trabalhado em um exportador que apóia .png , .jpeg , .gif e .pdf . por favor veja minha solicitação de pull aqui

No entanto, meu método é uma implementação _server-side_ que depende de phantomjs. Na minha opinião, seria uma boa ideia ter um exportador do lado do cliente também. Eu adoraria ver sua versão completa

@yuvii Hi! Eu lancei meu projeto (provavelmente deveria ter atualizado este problema ...), às

Você pode brincar com ele online em http://times.github.io/axisJS/

PDF é super útil, vai dar uma olhada no seu PR. Em última análise, estou precisando de formatos de impressão para axisJS em breve ...

Uau, você realmente foi em frente e fez uma GUI inteira para isso. Acabei de criar uma ferramenta de linha de comando para exportação. Muito legal, cara.

Este é mais um problema de suporte neste momento do que qualquer coisa tão final. A ferramenta CLI de @yuvii é muito legal e útil, então vamos direcionar a conversa sobre isso para sua solicitação de pull, # 555.

Quem chegar a isso, a implementação de @gonsakon aqui faz o que eu fiz com Angular, mas com jQuery - pode ser um exemplo mais fácil do que o que dei!

Oi, estou tentando converter gráfico c3 ou seja, SVG em imagem, mas não está funcionando.
Parece que c3.css, que é css externo, não está sendo aplicado.
Como podemos aplicar o css externo a um SVG

@ raj-mehta Pergunte no C3 Google Group , este é um problema fechado e a falta de detalhes que você forneceu em sua consulta torna praticamente impossível ajudá-lo.

Obrigado pela sua reversão,
Estou usando o seguinte svg e usado em ur sample.html, mas o gráfico no navegador e a imagem convertida do canvg não correspondem.

Estou tendo o mesmo problema que raj-mehta com as barras de eixo extra largas. Você encontrou uma solução para isso?

O problema é que apenas os estilos embutidos importam ao fazer a exportação. Modifiquei minha versão local do c3 para incluir alguns estilos adicionais (como opacidade de preenchimento: 0 para gráficos de linha que mostram um fundo preto estranho) e a imagem sai como você esperaria.

@aendrew , diga-me a fonte deste http://times.github.io/axisJS/#/ eu preciso deste tutorial ... por favor me ajude

Você pode adicionar o recurso de exportação de PNG a gráficos c3 usando meu módulo: https://github.com/annatomka/ng-c3-export

Olá @annatomka, posso usar https://github.com/annatomka/ng-c3-export com gráficos de carregamento assíncronos? Meu código:

app.controller ("ChartController", function ($ http) {
$ http.get ('URL').
sucesso (função (dados, status, cabeçalhos, configuração) {
c3.generate ({
bindto: "# My-chart",
dados: {
tipo: 'torta',
colunas: [
['amostra', 30],
['amostra2', 200]
]
}
});
}).
erro (função (dados, status, cabeçalhos, configuração) {
depurador;
});

- Desenha o gráfico corretamente, mas nenhum ícone de download

@annatomka Ótimo módulo, mas também estou tendo problemas com gráficos de carregamento assíncrono. O botão de download desaparece quando eu recrio o gráfico.

@annatomka Isso é tão bom! Estou usando totalmente seu módulo no próximo projeto Angular que fizer!

@annatomka +1

@ morales-franco @johnmarkli Corrigi o problema de carregamento assíncrono, você pode tentar na nova versão (0.1.5). Eu adicionei alguns exemplos também.

@annatomka Meu gráfico de pizza está começando a ser

o que estou perdendo no css?

@annatomka Ótimo módulo, mas também estou tendo problemas com os navegadores. Não funciona no seu módulo do Internet Explorer. Você pode consertar o bug? obrigado

Sério aqui, pessoal. Se você tiver problemas com o annatomka / ng-c3-export, relate-os na fila de problemas do

Tópico de bloqueio.