Eu criei um gráfico de barras básico usando chartjs e funciona bem. Agora eu quero atualizar os valores em um intervalo baseado em tempo. Meu problema é que, depois de criar o gráfico, não sei como atualizar seus valores corretamente ...
Meu código:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
no código de teste, estou atualizando os valores com datasets[0].data
- esta é a maneira correta de fazer isso? O problema é que, toda vez que ligo chart.Bar()
, os valores são redefinidos para 0 e animados para o valor aleatório (como eu estou recriando o gráfico). Dessa forma, todas as animações são sempre de 0 a valor, o que parece estranho. Eu esperaria que, se eu atualizasse um valor de 50 para 10, a barra diminuiria para 10 de 50 e não configurada para 0 e animada para 10.
Não encontrei nada nos documentos sobre isso ... estou fazendo algo errado ou isso é impossível com esta biblioteca?
fonte
Respostas:
Atualização: parece que o chartjs foi atualizado (veja o comentário abaixo). Existem alguns exemplos que parecem muito agradáveis:
Correio Original
Desde novembro de 2013, parece haver poucas opções para atualizar gráficos.
Há um bom exemplo aqui (duplicado abaixo) de adição de novos pontos a um gráfico de linhas. Ainda meio nervoso, mas não tão ruim. No entanto, acho que o efeito provavelmente depende do gráfico que você está usando.
Parece que isso está em algum lugar no pipeline de desenvolvimento. Ainda não vejo nenhuma indicação de data de lançamento: https://github.com/nnnick/Chart.js/issues/13 [Encerrada em 26 de julho de 2014]
JS
HTML
fonte
O
update()
aciona uma atualização do gráfico. chart.update ()update()
pode ser chamado com segurança após atualizar valores de um ou mais pontos existentes no objeto de dados, renderizando as alterações em um loop de renderização animado.fonte
Aqui está como fazer isso na última versão do ChartJs:
Veja este vídeo claro
ou testá-lo em jsfiddle
fonte
chart.update()
anima a partir da posição anterior dos pontos, como o OP queria.Você também pode usar a função destroy (). Como isso
fonte
Você só precisa alterar o
chartObject.data.datasets
valor e chamarupdate()
assim:fonte
Remova o dom da tela e adicione novamente.
fonte
Eu acho que a maneira mais fácil é escrever uma função para atualizar seu gráfico, incluindo o
chart.update()
método. Confira este exemplo simples que escrevi no jsfiddle para um gráfico de barras.Espero que isto ajude.
fonte
Eu não acho que seja possível agora.
No entanto, esse é um recurso que deve vir em breve, como o autor sugeriu aqui: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
fonte
Se destroy () e clear () não estiver funcionando (exatamente como eu tinha experiência), você pode usar o jquery para remover a tela e anexá-la novamente.
fonte
A maneira mais simples é substituir o elemento da tela e, em seguida, chamar novo Chart () novamente:
Obviamente, você deve substituir yourChartData, yourChartType e yourChartOptions pelos valores corretos necessários para inicializar o Chart.js. Consulte Documentos do Chart.js .
Você pode chamar a função reloadMyChart com um clique no botão ou em qualquer outro evento necessário. Provavelmente, você adicionará parâmetros a essa função e os utilizará para fazer uma chamada REST para atualizar dinamicamente seu gráfico, assim:
Espero que ajude! =)
fonte
Mostrando o gráfico de atualizações em tempo real
código completo, você pode fazer o download no link da descrição
fonte
Existem pelo menos duas maneiras de resolvê-lo:
1)
chart.update()
2) Exclua o gráfico existente usando chart.destroy () e crie um novo objeto de gráfico.
fonte
Você pode verificar a instância
Chart
usandoChart.instances
. Isso fornecerá todas as instâncias dos gráficos. Agora você pode iterar nessas instâncias ee alterar os dados, que estão presentes dentro da configuração. suponha que você tenha apenas um gráfico em sua página.fonte
Tão simples, basta substituir o elemento de tela do gráfico.
fonte