C3: forçar quebra de linha no texto do tique do eixo x

Criado em 17 out. 2014  ·  9Comentários  ·  Fonte: c3js/c3

Ei

http://jsfiddle.net/gbdtjsba/11/

Tenho rótulos bastante longos em meu gráfico. Eu adicionei uma altura rígida de 500px ao gráfico e 200px ao eixo x, o que funciona, mas gostaria de tornar a altura do eixo dinâmica, se possível.

Devo percorrer os rótulos para encontrar o maior e calcular sua largura antes de aplicar o gráfico, ou c3 tem um recurso que pode fazer isso?

Pode estar relacionado a este: https://github.com/masayuki0812/c3/issues/527

Obrigado por uma ótima biblioteca, até agora ela me salvou muitas horas de programação d3 :)

C-feature-request

Comentários muito úteis

Parece não estar mexendo em violinos ... Que tal no código real? Funciona para mim. E defina axis.x.tick.multiline = false para mostrar como uma linha. Agora, multiline é o padrão.

Acho que parece razoável introduzir algo para forçar quebras de linha. Vou implementar se necessário.

Todos 9 comentários

Olá, obrigado por seu relatório. Acho que este commit permite calcular a altura do eixo x automaticamente, então você poderia tentar o código mais recente novamente? Obrigado.

ATUALIZAR:
Eu introduzi axis.x.tick.width para suportar texto de escala de múltiplas linhas, então defina esta opção null neste momento. Sem isso, o texto do tique será dividido em várias linhas, mesmo se forem giradas.

Olá,

Obrigado pela sua atualização, infelizmente não acho que esteja funcionando -

  1. http://jsfiddle.net/gbdtjsba/15 - Sem a altura do eixo x 200px (que estou tentando remover), os resultados são os mesmos de antes. Tente redimensionar o gráfico para ver o comportamento inconsistente.
  2. http://jsfiddle.net/gbdtjsba/11 - No carregamento, o eixo x parece ter a altura errada, mas isso é corrigido quando você redimensiona. Essa versão ainda tem 200px de altura no eixo x, e acho que está revertendo para essa altura, não calculada.

Acho que o que precisa acontecer é, por exemplo, o gráfico tem 500px de altura, os pontos do eixo têm uma largura / altura máxima de 125px, então o gráfico recebe automaticamente uma altura de 375px e rótulos de 125px. Ou, se você preferir / como uma opção, a capacidade de tornar a altura do gráfico 500px e a altura geral incluindo rótulos torna-se 625px.

Marcadores em mais de 1 linha são ótimos. É possível forçar quebras de linha? Por exemplo 2014-10-22 \n 2014-10-15 \n 2014-10-08 ?

Parece não estar mexendo em violinos ... Que tal no código real? Funciona para mim. E defina axis.x.tick.multiline = false para mostrar como uma linha. Agora, multiline é o padrão.

Acho que parece razoável introduzir algo para forçar quebras de linha. Vou implementar se necessário.

Acho que parece razoável introduzir algo para forçar quebras de linha. Vou implementar se necessário.

sim. Precisava.

algum plano para isso?

@laurabrooks Não tenho certeza do que você está se referindo com "isto", mas axis.x.tick.multiline foi implementado por um tempo e eu recentemente apresentei o suporte para axis.x.tick.multilineMax e adicionei documentação para ambos (consulte aqui ), espero que ajude.

Eu estava pensando em forçar uma quebra de linha em um ponto especificado no texto do rótulo. Os atributos multiline e multilineMax farão o trabalho, obrigado pela resposta @jcsmorais

Ei, há alguma disposição para rótulos de eixo multilinha?

Estou encerrando este problema porque já existem opções de várias linhas. Consulte a documentação informada por @jcsmorais.

Esta página foi útil?
0 / 5 - 0 avaliações