Угловой материал nvd3

Question

Я использую комбинацию углового материала и NVD3, исследуя, почему всплывающие подсказки не видны для меня.

Я нарезанный и клонировал пример, предоставляемый из http://krispo.github.io/angular-nvd3/#/quickstart в plunker и это что-то вроде этого:

В то время как тот же один на угловом материале с nvd3 оберткой выглядит следующим образом (без подсказки)

бродила, если кто-нибудь был подобный опыт и как он был решен.

Декларация:

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

и внутри контроллера

$scope.chartChartOptions = { 
      chart: { 
       type: 'multiBarChart', 
       height: 450, 
       margin : { 
        top: 20, 
        right: 20, 
        bottom: 45, 
        left: 45 
       }, 
       clipEdge: true, 
       duration: 500, 
       stacked: true, 
       xAxis: { 
        axisLabel: 'Time (ms)', 
        showMaxMin: false, 
        tickFormat: function(d){ 
         return d3.format(',f')(d); 
        } 
       }, 
       yAxis: { 
        axisLabel: 'Y Axis', 
        axisLabelDistance: -20, 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       } 
      } 
     }; 


    $scope.chartData = [{"key":"Stream0","values":[{"x":1,"y":1.2191711805077412,"y0":0,"series":0,"key":"Stream0","size":1.2191711805077412,"y1":1.2191711805077412}]},{"key":"Stream1","values":[{"x":1,"y":2.8682672436400285,"y0":1.2191711805077412,"series":1,"key":"Stream1","size":2.8682672436400285,"y1":4.08743842414777}]},{"key":"Stream2","values":[{"x":1,"y":0.18054369373704626,"y0":4.08743842414777,"series":2,"key":"Stream2","size":0.18054369373704626,"y1":4.2679821178848165}]}]; 

Для версий библиотек:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-data-table/0.9.11/md-data-table.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.6/ng-csv.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script> 

Я попытался проб и ошибок, но без посторонней помощи, кто-то в такой же ситуация?

Answer 1

После того, как мы начали копать, мы забыли включить все CSS-страницы рамки, которые отображали бы график.

Answer 2

Иногда это также происходит с использованием опции useInteractiveGuideline с величиной true. Thsi вызвано тем, что между вариантами подсказок есть значение. Способ сделать эту работу - создать обратный вызов для всплывающей подсказки и установить «useInteractiveGuideline:true»

callback: function(chart) { 
         $timeout(function() { 
          d3.selectAll('.nvtooltip').style('opacity', 0); 
         }, 100); 
        }, 
useInteractiveGuideline: true, 
       tooltips: true,