4
votos
Aceito
Como adicionar legenda em um gráfico usando ChartJS?
Alterei apenas o final do seu código:
Inclui o generateLegend() para gerar uma legenda na nova div que adicionei (legendDiv).
Aqui você consegue ler sobre a documentação do chart JS V1.
var ...
4
votos
Aceito
Como alterar chart.js exibir c,
Você pode adicionar um para a escala tanto do eixo X como do eixo Y
scales: {
yAxes: [{
ticks: {
max: 5,
min: 0,
stepSize: 1
}
}]
}
Na ...
4
votos
Aceito
Como usar Chart.Js com ASP.NET MVC
Uma forma simples de utilizar é utilizando o Chart.Mvc.
Para utilizar este pacote, basta instalar via NuGet com o seguinte comando:
Install-Package Chart.Mvc
Após isso, faça algo parecido com ...
4
votos
Aceito
Mais de um gráfico com Chart.js
$(function() {
var optionsBar = {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var dataBar = {
...
3
votos
Aceito
Mudança de cor no gráfico com ChartJS não está funcionando
Altere os parâmetros de cor conforme indicado abaixo. E inclua uma função para conversão de cor Hexadecimal para RGBA. Inclui também a propriedade backgroundColor no dataset e foi.
$(document)....
3
votos
Aceito
Tem como desativar a animação do de um gráfico Charts.js?
Para desabilitar as animações passe no options a seguinte configuração:
options: {
animation: false
}
3
votos
Javascript: ChartJS - Como destacar "pedaço" do gráfico quando usuário clicar?
Consegui!
Código funcionando
function GraficoController($http, $element, $attrs) {
var vm = this;
vm.myLabels = [];
vm.myValues = [];
vm.myHoverColor = [];
vm.myForteColor = []...
3
votos
Aceito
Dar Foreach em label no Chartjs / Canvas - CodeIgniter
Ao invés de criar na mão a estrutura do array javascript, deixe json_encode() fazer isso pra você. Só crie a lista de nomes e deixe a função imprimir o array formatado:
labels: <?php foreach ($...
3
votos
Aceito
Atualizar div com Javascript ou AngularJS - para IONIC
Vamos lá,
Primeiro você esta na verdade instânciando duas controllers separadas do seu chartController, veja:
<select ng-controller="chartController" ...">
<div id="charts" ng-controller="...
3
votos
Aceito
Como fixar a porcentagem em cima do gráfico usando ChartJS?
Não precisa mudar nada no código do seu gráfico se quiser mostrar apenas quantidade, apenas inclua referência para o chartjs-plugin-datalabels.min.js.
Mas como você precisa da porcentagem é ...
3
votos
Aceito
Como passar o retorno(JSON) de uma requisição getJson dentro do data onde será os valores do gráfico?
Se você explicitamente necessita de dados do retorno do JSON, encapsule sua lógica "neste retorno":
var widgetTechnologiesChart = function() {
if ($('#kt_widget_technologies_chart').length ...
3
votos
Aceito
Uncaught ReferenceError: Chart is not defined
Verifique qual versão do arquivo você baixou, no exemplo abaixo utilizei a versão 2.8.0 e funcionou corretamente:
Veja aqui os arquivos https://cdnjs.com/libraries/Chart.js
var ctx = document....
2
votos
Aceito
Populando Chart.js com dados de requisição AJAX
Para renderizar novamente os gráficos, você só precisa chamar novamente a função gerarGraficos. Mas como você quer que seja renderizado com novos dados, as variáveis dataLine e dataBar precisam serem ...
2
votos
Aceito
Line chart sendo populado somente com ultimo registro somente em while/php
Minha implementação para esse problema seguindo os mesmos comandos básicos descritos seria algo como:
https://gist.github.com/wilcorrea/797500f5fed2f8e27bd8a6cf0c6d1e68
<?php
// JS property
...
2
votos
Aceito
Cor números chartjs
O chartsjs possui uma série de atributos com funcionalidades especificas na questão de aparencia do objeto renderizado.
Um exemplo para as 'labels' da legenda (retirada da própria documentação):
var ...
2
votos
Sobreposição de gráficos
Passei pelo mesmo problema.
A solução foi que ao trocar os dados eu removia o canvas do DOM e inseria um novo canvas com os novos valores.
Ai criei uma diretiva que encapsulava as diretivas do ...
2
votos
Aceito
Como exibir valores do gráfico em chartJS sem mouseover?
Você pode user o eventos que o ChartJS disponibiliza. Por exemplo, para que o gráfico responda apenas a eventos de clique, você pode usar:
options: {
//Este gráfico não responderá ao ...
2
votos
Como formatar valores monetários para ser exibido em formato brasileiro com chartjs
Para formatar dados no tooltip use Tooltip Callbacks
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
//Format data
},
},
Para acessar os valores do tooltip: data....
1
voto
Como popular Gráfico ChartJS com VueJs e Axios?
Aconselho usar um pacote chama vue-chartjs https://vue-chartjs.org/ e criar wrappers em cima dele, caso você não queira usar, você pode criar uma variável booleana em data, chamada hasData: false e ...
1
voto
Aceito
Retornar label escolhida ao clicar em alguma coluna do gráfico - Chart.Js
acho que a forma mais organizada seria assim, adicione a propriedade onClick no objeto options
options:{
onClick: minhaFuncao
}
e crie a respectiva função:
function minhaFuncao(event, array){
...
1
voto
ChartJs com dataset dinamico
Crie um vetor com as informações retornadas no banco e inclua o vetor nos parâmetros do dataset.
var data[];
var valores[];
//data e valores virão do seu banco.
this.barChart = new Chart(this....
1
voto
Aceito
Melhorar visual de informações no Chart.js
Tente adicionar o beginAtZero na configuração de escalas no yAxes, na qual deixará explicito que a escala comece no zero.
scales: {
yAxes: [{
ticks: {
beginAtZero: true
...
1
voto
Aceito
Chart.js different color for negative/positive chart bars
Na realidade está tudo certo, só que o gráfico está começando a partir do valor mais baixo, tem uma opção para setar como 0 o valor minimo do eixo Y:
options: {
legend: {
display: false
...
1
voto
Aceito
Usando ChartsJS
Caro, o mais próximo que cheguei para atender sua necessidade, foi da forma abaixo.
Não consegui torna-lo executavel aqui stackoverflow, porque gera erro. Mas você pode acessar em meu codepen.io/...
1
voto
Aceito
Chartsjs exportar PNG automaticamente
Apenas chame a função: downloadImage();, assim quando a página carregar ele executa a função sem a necessidade do click.
Coloquei a função no seu JSFiddle, e mandei executar novamente o código e fez ...
1
voto
Chart.js não aparece
Pelo que estou vendo, o problema está no status_name_list, você não postou como está sendo preenchido esse array, aparece undefined quando o chart não encontra o nome da legenda para aquela parte do ...
1
voto
Aceito
Chartjs - Inserir % no final de valor em tooltip
Feito.
Baseado na documentação do ChartJS:
A configuração do rótulo da ferramenta é aninhada abaixo da
configuração da dica de ferramenta usando a chave de retorno de
chamada. O tooltip tem as ...
1
voto
Aceito
Gráfico de minutos por horas com chart js
Consegui solucionar. Creio que o erro estava no formato da data ou no método de arredondamento. Segue abaixo o resultado.
$(function() {
drawCharts('real', true, true);
});
function ...
1
voto
Sobreposição de gráfico no chartJS
Mude o escopo da variável graficoTotalAlunosPorTurma para global, e antes de criar uma nova instância de Chart, apague a anterior
if(this.graficoTotalAlunosPorTurma){
this....
Only top scored, non community-wiki answers of a minimum length are eligible