使用d3.js在SVG中放置画布(chart.js线图)
使用d3.js在SVG中放置画布(chart.js线图)
提问于 2015-06-22 08:25:46
我第一次试着这样做的时候，那是很棒的。
<button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button>
但是，当我试图对canvas对象执行同样的操作时，在这种情况下，由chart.js库生成的线条图无法工作。我使用d3.js将图表插入svg中。我还在angularjs chart.js指令中放置了一个断点(我通过指令使用chart.js )，并注意到根本没有调用该指令。
带有foreignObject画布的chart.js正在插入到html中，只是没有呈现。
<foreignObject x="5" y="5">
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick"></canvas>
</foreignObject>
还有其他人也有类似的问题吗？
Stack Overflow用户
回答已采纳
发布于 2015-06-23 11:16:41
查看生成的HTML
您需要在foreignObject上设置高度和宽度
d3.select("svg")
.append("foreignObject")
.attr("width", 480)
.attr("height", 500)并将画布附加到foreignObject下的body元素中。
...
.append("xhtml:body")
.html('<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true"></canvas>');下面是一个工作片段(与Chrome核对)
var app = angular.module("app", ["chart.js"]);
app.controller("chartController", ['$scope',
function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}
])
d3.select("svg")
.append("foreignObject")
.attr("width", 480)
.attr("height", 500)
.append("xhtml:body")
.html('<canvas id="line" class="chart chart-line" data="data" labels="labels"></canvas>');<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<link href="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" rel="stylesheet" />
<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
<div ng-app="app">
<div ng-controller="chartController">
<svg width="960" height="500"></svg>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30975192
复制相关文章
相似问题
腾讯云开发者
