[英]Placing canvas (chart.js line chart) inside an SVG using d3.js
我首先嘗試使用進行操作,效果很好。
<button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button>
但是,當我嘗試對canvas對象執行相同操作時,在這種情況下,由chart.js庫生成的折線圖不起作用。 我正在使用d3.js將圖表插入svg。 我還在我的angularjs chart.js指令中添加了一個斷點(我通過該指令使用chart.js),我注意到該指令根本沒有被調用。
將帶有chart.js畫布的foreignObject插入到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>
還有其他人有類似的問題嗎?
查看生成的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.