C3: inteiro apenas do eixo x, y

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

como fazer com que o eixo seja apenas inteiro?
qq 20141015141217

o que tentei é usar a opção tick:

tick: {
    format: function(x) {
        return (x == Math.floor(x)) ? x : "";
    }
}

isso pode fazer com que o rótulo mostre apenas inteiros, mas a linha divisória no eixo ainda existe.
qq 20141015141829

existe uma maneira de controlar o tique do eixo?

question resolved maybe

Comentários muito úteis

Melhor versão:

    axis: {
        y: {
            tick: {
                format: function(x) { return x % 1 === 0 ? x : ''; }
            }
        }
    }

Todos 9 comentários

na versão de desenvolvimento atual (master), você pode usar axis.y.values para definir a lista de ticks. por exemplo

{
  axis: {
    y: {
      ticks: [1,2,3]
    }
  }
}

mas isso não pode ser dinâmico com base na fonte de dados, estou certo?

Você pode calcular esses valores após o carregamento dos dados, defini-los como chart.internal.config.axis_y_tick_values e, em seguida, chamar chart.flush() para aplicar novos valores de eixo.

Que tal este código?

    axis: {
        y: {
            tick: {
                format: function (x) {
                    if (x != Math.floor(x)) {
                      var tick = d3.selectAll('.c3-axis-y g.tick').filter(function () {
                        var text = d3.select(this).select('text').text();
                        return +text === x;
                      }).style('opacity', 0);
                      return '';
                    }
                    return x;
                }
            }
        }
    }

Parece que já está resolvido, deixe-me encerrar.

FWIW, exigir o conhecimento interno do D3 e executar JS parece muito estranho. Eu vejo muito esse padrão nesses problemas C3: alguém tem um problema e, em vez de oferecer uma opção C3, 5-30 linhas de javascript que manipulam o SVG subjacente com d3 é a solução aceita. Acho que, a longo prazo, isso será um grande prejuízo para a adoção do C3.

Para este problema em particular, uma opção "axis.y.tick.integer_only" seria de valor incrível. Eu adoraria fornecer uma extensão para C3 para isso. Eu vejo uma extensão de exemplo aqui . Existe um guia de extensão em algum lugar que possa me orientar?

Obrigado!

Editar: gramática.

Você pode calcular esses valores após o carregamento de dados, defina-o para chart.internal.config.axis_y_tick_values ​​e, em seguida, chame chart.flush () para aplicar novos valores de eixo.

Referindo-me a isso, porque eu também tive este problema hoje - fazer flush() bagunçará a animação da mudança de dados, e adicionar um atraso também tem algumas falhas gráficas. No entanto, definir chart.internal.config.axis_y_tick_values com o valor adequado antes de chamar load() funciona perfeitamente. Talvez isso seja útil para alguém :).

Melhor versão:

    axis: {
        y: {
            tick: {
                format: function(x) { return x % 1 === 0 ? x : ''; }
            }
        }
    }

Obrigado nnabinh - funcionou um deleite.

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

Questões relacionadas

seubert picture seubert  ·  3Comentários

Saikat-Sinha picture Saikat-Sinha  ·  3Comentários

alantygel picture alantygel  ·  3Comentários

DieterSpringer picture DieterSpringer  ·  4Comentários

aishwaryak picture aishwaryak  ·  4Comentários