2 votes

black_sheep07 avatar

Utiliser une valeur différente au passage de la souris dans angular nvd3

Demandé el 4 de Mai, 2017
Quand la question a-t-elle été
257 affichage
Nombre de visites la question a
1 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un ensemble de données qui contient une fréquence par centaine et un compte absolu. L'ensemble de données ressemble à ceci :

$scope.data = [
    {
        key: "Cumulative Return",
        values: [
                {
                    "label" : "A" ,
                    "value" : 15  ,
                    "data"  : 486
                } ,
                {
                    "label" : "B" ,
                    "value" : 11  ,
                    "data"  : 403
                } ,
                {
                    "label" : "C" ,
                    "value" : 10  ,
                    "data"  : 374
                } ,
                {
                    "label" : "D" ,
                    "value" : 9  ,
                    "data"  : 362
                } ,
                {
                    "label" : "E" ,
                    "value" : 8  ,
                    "data"  : 321
                } ,
                {
                    "label" : "F" ,
                    "value" : 6  ,
                    "data"  : 246
                } ,
                {
                    "label" : "G" ,
                    "value" : 4  ,
                    "data"  : 187
                } ,
                {
                    "label" : "H" ,
                    "value" : 1  ,
                    "data"  : 42
                }
            ]
        }
    ]

Inclus dans ce plunker vous pouvez voir qu'en passant la souris sur chaque barre, on lit A 15.0 etc. Je voudrais pouvoir faire afficher une valeur différente, à savoir "count" comme le mouseover mais je ne vois pas d'option de ce type dans la documentation. J'aimerais qu'elle se lise comme suit A 486 , B 403 etc.

Comment puis-je y parvenir ?

Demandé el 4 de Mai, 2017 par black_sheep07

Réponse

Trop de publicités?

3voto

Gilsha avatar
Gilsha Points 12214

Utiliser la configuration du générateur de contenu de l'infobulle

tooltip: {
   contentGenerator: function(record) {        
      return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span>&nbsp;' + record.data.label + ' ' + record.data.data + '</p>';
   }
},

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },
      x: function(d) {
        return d.label;
      },
      y: function(d) {
        return d.value + (1e-10);
      },
      showValues: true,
      valueFormat: function(d) {
        return d3.format(',.4f')(d);
      },
      tooltip: {
        contentGenerator: function(record) {        
          return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span>&nbsp;' + record.data.label + ' ' + record.data.data + '</p>';
        }
      },
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      }
    }
  };

  $scope.data = [{
    key: "Cumulative Return",
    values: [{
        "label": "A",
        "value": 15,
        "data": 486
      },
      {
        "label": "B",
        "value": 11,
        "data": 403
      },
      {
        "label": "C",
        "value": 10,
        "data": 374
      },
      {
        "label": "D",
        "value": 9,
        "data": 362
      },
      {
        "label": "E",
        "value": 8,
        "data": 321
      },
      {
        "label": "F",
        "value": 6,
        "data": 246
      },
      {
        "label": "G",
        "value": 4,
        "data": 187
      },
      {
        "label": "H",
        "value": 1,
        "data": 42
      }
    ]
  }]
});

<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Angular-nvD3 Discrete Bar Chart</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <nvd3 options="options" data="data"></nvd3>

  <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>

</html>
Répondu el 4 de Mai, 2017 par Gilsha (12214 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X