ツールチップが表示されない理由を調査しながら、Angular マテリアルと NVD3 の組み合わせを使用しています。
http://krispo.github.io/angular-nvd3/#/quickstartから提供された例を切り刻んで複製し、プランカーにしました。これは次のようなものです。
nvd3ラッパーを使用したAngular Materialの同じものは次のようになります(ツールチップなし)
誰かが同様の経験をしたかどうか、そしてそれがどのように解決されたかをさまよっていました。
宣言:
<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>
試行錯誤しましたが、助けがなく、同じような状況の人はいますか?