C3: Formas personalizadas para pontos

Criado em 20 mar. 2015  ·  47Comentários  ·  Fonte: c3js/c3

Seria ótimo poder definir diferentes formas (círculo, quadrado, triângulo, estrela, ...) para os pontos do gráfico.

Eles são 2 motivos principais para isso:

  • Imprimindo em uma impressora de escala de cinza
  • Pessoas daltônicas

Alguns tópicos foram criados no grupo do google sem resposta:
https://groups.google.com/d/topic/c3js/I2UhY4U6zI0/discussion
https://groups.google.com/d/topic/c3js/gZrpl0QpKYw/discussion
https://groups.google.com/d/topic/c3js/6QRQ1VWx3vw/discussion

A legenda deve usar a mesma forma que a definida para os pontos.

Aqui está como eu imagino a configuração:

point: {
  shape: {
    'data1': 'circle',
    'data2': 'square',
    'data3': 'triangle'
  }
}

ou, para definir alguns outros atributos personalizados:

point: {
  'data1': {
    shape: 'circle',
    color: '#ff0000',
    r: 2
  },
  'data2': {
    shape: 'square',
    color: '#0000ff',
    r: 3
  }
}
C-feature-request R-needs-docs

Comentários muito úteis

Todos que desejam esse recurso, inscrevam-se ou usem uma resposta de emoji em vez de responder +1.

Obrigado.

Todos 47 comentários

Eu realmente apreciaria esse recurso.

+1

+1 principal

+1

+1
Alguém encontrou uma maneira de conseguir isso?

Trabalhei na implementação de formas personalizadas para pontos de plotagem. Eu implementei formas quadradas e retangulares.
Aqui está o meu trabalho:
https://github.com/prakulgupta/c3.js-CustomPlotPointShapes-Feature.git

Espero que isso possa ajudar as pessoas que precisam do recurso de forma personalizada :+1:

Obrigado @prakulgupta !
Para obter formas diferentes, tive que executar uma função d3 depois que o gráfico foi construído que mudou os círculos para quadrados. Faz-me sentir nojento. Meu plano era apenas reconstruir nosso gráfico de dispersão com d3 direto. Vou tentar esse repositório!

+1 adoraria ver isso integrado também.

+1 muito necessário

+1 seria incrível!

@prakulgupta Parece um bom candidato para um pull request! Você talvez consideraria fazê-lo? Obrigado!

eu quero uma forma de triângulo :( , ou uma marca de seta. Para mostrar o ponto no gráfico de barras.

+1

+1

👍

Encontrei a solução para isso. Use d3. É bem mais fácil do que você imagina. Ex: http://bl.ocks.org/bunkat/2595950

Eu diria que isso não é realmente uma solução.
Estamos usando o monte de funções que o c3 fornece. Reescrevê-los usando a biblioteca d3 nativa não é muito útil.

+1, também seria ótimo ter tipos de pontos para legenda

+1!

+1

👍

+1

Todos que desejam esse recurso, inscrevam-se ou usem uma resposta de emoji em vez de responder +1.

Obrigado.

Algo como um modo de alternância entre esses dois tipos de exibição dos gráficos seria legal.

Você poderia usar algo como https://github.com/d3/d3-shape#symbols para fazer isso?

Para outra solução com gráfico de dispersão, veja aqui: http://stackoverflow.com/a/41848255/1178015

+1

👍

👍

+1

+1

Qual é o status desta questão/solicitação? Esta é realmente a única coisa que está me impedindo de usar o C3js e eu adoraria. A11y é uma grande preocupação e os pontos sobre impressão e daltonismo são válidos. Eu adicionei um polegar para cima no ano passado, mas o tópico ficou em silêncio em termos de uma solução. Isso é algo que pode estar em desenvolvimento atual ou esta solicitação está sendo negada?

Obrigado por todo o trabalho incrível e espero que uma resolução seja possível.

Também seria útil se permitisse mais do que símbolos, por exemplo, imagens ou svg.
Por exemplo, destacar determinados conjuntos de dados com base em alguns atributos seria muito legal.

Seria ainda mais incrível se pudesse permitir definir uma forma específica para um ponto específico de um conjunto de dados.
Exemplo de aplicação: Em um gráfico de velocidade do vento (data em x, velocidade em y), permitiria mostrar a direção do vento em cada valor (seta direcional em forma de ponto).

+1

👍

👍

Por favor, dê um upvote no comentário que você gosta, em vez de comentar +1 ou curtir, fica mais fácil acompanhar o problema, não enviando spam para a caixa de entrada de ninguém e enviando apenas mensagens sobre entradas relevantes

👍

👍

👍

👍

Alguém com conhecimento mais profundo da base de código c3 pode comentar sobre como se poderia implementar essa mudança? Dada essa orientação, talvez alguém da comunidade se voluntariasse para assumir essa tarefa.

Algum progresso esperado sobre isso? Esta é uma questão de quase 4 anos a partir desta escrita.

@BrandKNY Este projeto não é mais mantido. billboard.js é o novo branch ativo, mas esse recurso não está pronto no billboard.js nem

( este problema é antigo/2015! mas não existe estilo de ponto em https://c3js.org/reference.html)

Talvez o primeiro passo seja incluir um pequeno aprimoramento em vez de um grande salto para "qualquer forma"... Sugestão: como em data.colors , definição por conjunto de dados , oferecer opção para definir o raio do círculo como objeto,

 point: { 
    r: { data1: 5,   data2: 2.5 } 
} 
Esta página foi útil?
0 / 5 - 0 avaliações