Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

luan_alves

Marcação no highlights

Recommended Posts

Boa noite, estou há 3 dias configurando um gráfico no site de um cliente e estou com 99% pronto.

O que falta é aparecer os pontos de marcação no gráfico , que aparece em alguns casos que eu não consegui identificar.

 

O gráfico é montado á partir dos dados recebidos do banco, o retorno é formatado em JSON , linguaguem PHP utilizando framework Yii.

O plugin dos gráficos é o highcharts

 

A função que cria o gráfico é

function carrega_graficoSimples(valor) {
    var data = valor;
    // $.get('/chart/ranking?empresa=' + empresaId.value, function (data) {
    var empresas = [];
    for (var i = 0; i < data.empresa.length; ++i) {
        empresas.push({data: $.parseJSON(data.empresa[i].pontos), name: data.empresa[i].nome});
    }
    $('#internal-ranking').highcharts({
        colors: ['#F15854'],
        chart: {
            type: 'area'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: 'Sua pontuação em {point.x:%e-%m-%Y} é {point.y}'
        },
        plotOptions: {
            series: {
                fillOpacity: 0.1,
            },spline: {
                marker: {
                    enabled: true
                }
            }
        },
        exporting: {
            filename: 'grafico_simples'
        },
        series: empresas
    });
}

Dados de exemplo que não estão funcionando a marcação.

Data em unix

{"nome":"Livraria Cultura","pontos":"[[1430362800000,7.5],[1430276400000,6.5],[1429153200000,4.5],[1427770800000,6.5],[1427252400000,8.5],[1423706400000,8],[1423015200000,7.5],[1422842400000,4.5],[1422496800000,7.5],[1422324000000,7.5],[1421632800000,6.5],[1421373600000,4.5],[1421287200000,4.5],[1421200800000,7.5],[1420855200000,5.5],[1420768800000,0]]"}]}

Os mesmos dados , mas com as datas em formato comum

{"nome":"Livraria Cultura","pontos":"[[2015-4-30,7.5],[2015-4-29,6.5],[2015-4-16,4.5],[2015-3-31,6.5],[2015-3-25,8.5],[2015-2-12,8],[2015-2-4,7.5],[2015-2-2,4.5],[2015-1-29,7.5],[2015-1-27,7.5],[2015-1-19,6.5],[2015-1-16,4.5],[2015-1-15,4.5],[2015-1-14,7.5],[2015-1-10,5.5],[2015-1-9,0]]"}]}

Exemplo de dados que funcionam a marcação.

Data em unix

{"nome":"Panela do Guri","pontos":"[[1429153200000,7.5],[1429066800000,6.5],[1428980400000,6.5],[1428375600000,10],[1428030000000,7.5],[1427943600000,6.5],[1427857200000,7.5],[1427770800000,5.5],[1427684400000,6.5],[1427338800000,7.5],[1424311200000,7.5],[1423792800000,6.5],[1423620000000,7.5],[1423533600000,6.5],[1423101600000,7.5],[1423015200000,0]]"}]}

Os mesmos dados, mas com as datas em formato comum

{"nome":"Panela do Guri","pontos":"[[2015-4-16,7.5],[2015-4-15,6.5],[2015-4-14,6.5],[2015-4-7,10],[2015-4-3,7.5],[2015-4-2,6.5],[2015-4-1,7.5],[2015-3-31,5.5],[2015-3-30,6.5],[2015-3-26,7.5],[2015-2-19,7.5],[2015-2-13,6.5],[2015-2-11,7.5],[2015-2-10,6.5],[2015-2-5,7.5],[2015-2-4,0]]"}]}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia consegui resolver o problema.

 

foi adicionado o parametro " marker: {enabled: true}".

function carrega_graficoSimples(valor) {
    var data = valor;
    // $.get('/chart/ranking?empresa=' + empresaId.value, function (data) {
    var empresas = [];
    for (var i = 0; i < data.empresa.length; ++i) {
        empresas.push({data: $.parseJSON(data.empresa[i].pontos), name: data.empresa[i].nome, marker: {enabled: true}});
    }
    $('#internal-ranking').highcharts({
        colors: ['#F15854'],
        chart: {
            type: 'area'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: 'Sua pontuação em {point.x:%e-%m-%Y} é {point.y}'
        },
        plotOptions: {
            series: {
                fillOpacity: 0.1,
            },spline: {
                marker: {
                    enabled: true
                }
            }
        },
        exporting: {
            filename: 'grafico_simples'
        },
        series: empresas
    });
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.