如何在角度 chart.js 中更改画布高度和宽度答案

【问题标题】：How to change canvas height and width in angular chart.js如何在角度 chart.js 中更改画布高度和宽度
【发布时间】：2015-03-30 18:48:40
【问题描述】：

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

代码：

CSS
#我的图表{ 宽度：500 像素；高度：500 像素； }

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)

【问题讨论】：

标签： javascript html css angularjs canvas

【解决方案1】：

您实际上可以在画布标签中使用宽度和高度属性。示例：

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

【讨论】：

【解决方案3】：

我是通过画布样式添加的。用饼图测试。示例：

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

【讨论】：

【解决方案4】：

我通过更改一些选项属性并在上下文中设置宽度和高度来做到这一点：-

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

【讨论】：