logo标签列表

如何在Angular Chart.js中更改画布的高度和宽度

javascripthtmlcssangularjscanvas
8

我正在使用angular chart.js开发我的第一个示例代码，但无法更改自定义高度和宽度。如何更改画布的高度和宽度。

代码：

CSS
#myChart{ width:500px; height:500px; }

HTML

<body ng-controller="LineCtrl">
<canvas id="myChart" ></canvas>
<div class="chart-container">
        <linechart data="data" options="options" mode=""></linechart>
</div>

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)
4个回答
10

我通过更改一些选项属性并在上下文中设置宽度和高度来完成了它：

var options = { 
    responsive: false,
    maintainAspectRatio: false
}

在Js中

var ctx=document.getElementById("myChart").getContext("2d");

ctx.canvas.width = 100;
ctx.canvas.height = 100;

var myLineChart = new Chart(ctx).Line(data, options);
5

我通过在画布样式中添加来实现。使用饼图进行测试。 例如：

<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>

代码：

$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
}
3

您实际上可以在canvas标签中使用width和height属性。例如：

<canvas id="bar"
     height="100"
     width="100"
     class="chart chart-bar" 
     chart-data="dataChart"
     chart-labels="labels"
     chart-click="onClick"
     chart-options="options">
</canvas>
2
我将画布用一个简单的div包裹起来，并赋予它一个类。
<div class="my-chart">
<canvas ...></canvas>
</div>

在我的 CSS 中，我定义了高度和宽度。
.my-chart {
width: 700px;
height: 400px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接