Question

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

CODE：

CSS
#myChart { 宽度：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)

Answer 1

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

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

Answer 2

我通过画布风格添加。用饼图测试。例如：

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

Answer 3

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

e0

Answer 4

我用简单的div包裹画布并给它一个类

<div class="my-chart">
<canvas ...></canvas>
</div>

在我的CSS中我定义了高度和宽度

.my-chart {
width: 700px;
height: 400px;
}

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

4 个答案: