como fazer com que o eixo seja apenas inteiro?
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.
existe uma maneira de controlar o tique do eixo?
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.
Comentários muito úteis
Melhor versão: