7

No meu gráfico de linhas queria que quando passar o mouse na linha do gráfico ao aparecer a legenda, e que ela tivesse um título. Isso so é possível preenchendo o array de labels, porem aparece em baixo do gráfico, no eixo "X" os nomes, e eu não quero, quero apenas os títulos nas legendas.

Segue o código:

angular.module("app", ["chart.js"]).controller("LineCtrl", function($scope) {
    $scope.labels = ["Titulo 1", "Titulo 2", "Titulo 3", "Titulo 4", "Titulo      5", "Titulo 6", "Titulo 7"];
    $scope.series = ['Legenda 1', 'Legenda 2'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function(points, evt) {
        console.log(points, evt);
    };
});

Dessa forma, ele gera um titulo sobre as legendas ao passar o mouse, porem aparece os nomes abaixo do gráfico, eu queria que não aparecesse os nomes abaixo do gráfico, somente no título mesmo ao passar o mouse, como ficaria? inserir a descrição da imagem aqui

Referência: http://jtblin.github.io/angular-chart.js/

jsfiddle:http://jsfiddle.net/Lfmhcab3/4/

4

3 Respostas 3

3

A parte de mudar o conteúdo da tootlip podes fazer assim, modificando o multiTooltipTemplate:

// Chart.js Options
$scope.options = {
  multiTooltipTemplate: '<%= datasetLabel + ": " + value %>',

Para remover a legenda do eixo X é mais complicado. Tem havido discussões longas sobre isso (1, 2, 3) mas parece que ainda não há nada implementado nesse sentido. Dá para esconder o eixo Y com scaleShowLabels: false, mas não o eixo X...

Uma opção seria esconder ambos os labels com showScale: false, (exemplo).

Porém é possivel modificar os métodos da biblioteca e baseado na sugestão que o @potatopeelings te deu no SOen podes fazer assim:

var originalLineInitialize = Chart.types.Line.prototype.initialize;
Chart.types.Line.prototype.initialize = function(data) {
    var originalLabels = data.labels.slice();
    data.labels = new Array(data.labels.length);
    originalLineInitialize.apply(this, arguments);

    this.scale.xLabels = originalLabels;
    this.datasets.forEach(function(dataset) {
        dataset.points.forEach(function(point, i) {
            point.label = originalLabels[i];
        });
    });

    var originalScaleDraw = this.scale.draw;
    this.scale.draw = function() {
        for (var i = 0; i < this.xLabels.length; i++) {
            this.xLabels[i] = '';
        }
        originalScaleDraw.apply(this, arguments);
    }
}

jsFiddle: http://jsfiddle.net/8z5gp995/1/

2

Use scaleFontSize: false e scaleLabel: "<%= ' ' + value%>" no $scope.options.

JsFiddle: http://jsfiddle.net/rapa09/fph4jecj/5/

3
  • fui notar agora, ele tira o texto dos lados também, vou arrumar. Commented 13/04/2016 às 12:50
  • Arrumado e editado! Commented 13/04/2016 às 12:53
  • Fui ver em outro computador meu e ficou cortando, caso isso ocorra com você use: scaleLabel: "<%= ' ' + value%>" <-Isso serve para dar um espaço antes das labels laterais aonde tem '' coloque espaços(no máximo 2 espaços são aceitos!) Fonte: stackoverflow.com/questions/26498171/… Commented 13/04/2016 às 13:21
1

Adicione legend="false" no canvas que está sendo gerado o chart, dentro do arquivo html.

2
  • 3
    isso desabilita a legenda, eu nao quero desabilitar a legenda, quero desabilitar os labels em baixo, mas deixar o titulo ao passar o mouse, coloquei uma imagem, na imagem mostra que quero aquele titulo da legenda, e não quero q o mesmo apareça em baixo.
    – War Lock
    Commented 9/04/2016 às 22:25
  • 1
    coloquei o jsfidle, veja que ao passar o mouse na linha aparece os dias da semana no titulo, aquilo eu quero, so nao quero que apareça em baixo.
    – War Lock
    Commented 10/04/2016 às 0:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .