角材料nvd3答案

【问题标题】：Angular material nvd3角材料nvd3
【发布时间】：2016-02-18 19:27:41
【问题描述】：

我正在使用 Angular 材质和 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>

我尝试过反复试验，但没有帮助，有类似情况的人吗？

【问题讨论】：

标签： angular-material angular-nvd3

【解决方案1】：

有时，使用带有true 值的选项useInteractiveGuideline 也会发生这种情况。这是因为工具提示选项为真之间存在问题。完成这项工作的一种方法是为工具提示创建回调并设置“useInteractiveGuideline:true”

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

【讨论】：

【解决方案2】：

经过大量挖掘，我们忘记了包含所有框架的 CSS 表，这些表会使图形可见。

【讨论】：