javascript 如何在 angular chart.js 中更改画布高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28250375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change canvas height and width in angular chart.js
提问by venky
I am developing my first sample code using angular chart.js,I am unable to change custom height and width, How can i change height and width of my canvas.
我正在使用 angular chart.js 开发我的第一个示例代码，我无法更改自定义高度和宽度，如何更改画布的高度和宽度。
CODE:
代码：
CSS
#myChart{
width:500px;
height:500px;
}
CSS
#myChart{ width:500px; 高度：500px；}
HTML
HTML
<body ng-controller="LineCtrl">
<canvas id="myChart" ></canvas>
<div class="chart-container">
<linechart data="data" options="options" mode=""></linechart>
</div>
Javascript
Javascript
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var options = {
scaleOverlay : false,
scaleOverride : false,
scaleSteps : null,
scaleStepWidth : null,
scaleStartValue : null,
scaleLineColor : "rgba(0,0,0,.1)",
scaleLineWidth : 1,
scaleShowLabels : true,
scaleLabel : "<%=value%>",
scaleFontFamily : "'proxima-nova'",
scaleFontSize : 10,
scaleFontStyle : "normal",
scaleFontColor : "#909090",
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
bezierCurve : true,
pointDot : true,
pointDotRadius : 3,
pointDotStrokeWidth : 1,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
animation : true,
animationSteps : 60,
animationEasing : "easeOutQuart",
onAnimationComplete : null
}
var ctx=document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
//console.log(myLineChart)
回答by squiroid
I did it with changing some options attribute and set width and height in context:-
我通过更改一些选项属性并在上下文中设置宽度和高度来做到这一点：-
var options = {
responsive: false,
maintainAspectRatio: false
}
In Js
在 Js
var ctx=document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 100;
ctx.canvas.height = 100;
var myLineChart = new Chart(ctx).Line(data, options);
回答by cainhs
I did by adding via canvas style. Tested with Pie Chart. Example:
我是通过画布样式添加的。用饼图测试。例子：
<canvas id="pie" class="chart chart-pie" style="height:40px;"
chart-data="pieChart.data" chart-labels="pieChart.labels"
chart-colours="pieChart.colours"
chart-options="pieChart.options">
</canvas>
Code:
代码：
$scope.pieChart = {};
$scope.pieChart.labels = ['Label 1', 'Label 2'];
$scope.pieChart.data = [10,20];
$scope.pieChart.colours = ['#1EF9A1', '#FD1F5E'];
// This option is important!!!
$scope.pieChart.options = {
responsive: false,
maintainAspectRatio: false
}
回答by Kennyb
You can actually use the width and height attribute within the canvas tag. Example:
您实际上可以在画布标签中使用宽度和高度属性。例子：
<canvas id="bar"
height="100"
width="100"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-click="onClick"
chart-options="options">
</canvas>
回答by epv
I wrapped the canvas with a simple div and gave it a class
我用一个简单的 div 包裹了画布并给了它一个类
<div class="my-chart">
<canvas ...></canvas>
</div>
In my css I defined the height and the width
在我的 css 中，我定义了高度和宽度
.my-chart {
width: 700px;
height: 400px;
}
