web-dev-qa-db-fra.com

Changer la largeur et la hauteur dans le module angular-chart.js

J'utilise le module angulaire angular-chart.js . Il est simple de travailler avec et très intelligent. Mais j'ai remarqué que je ne pouvais pas changer les width et height des graphiques. J'ai lu quelque part que je dois définir la taille du graphique comme suit:

var vm = $scope;
vm.labels = [];
vm.data = [];

CrudService.getData(selDate).$promise.then(
     function (response) {
       angular.forEach(response, function (val) {
          val.datum = $filter('date')(val.datum, 'dd.MM.yyyy');
          vm.labels.Push(val.datum);
          vm.data.Push(val.grade);
       });

       vm.dataChart = [vm.data];

       /* This is the important part to define the size */
       vm.options = [
         {
            size: {
               height: 200,
               width: 400
            }
         }
       ];
       /************************************************/
    });

La vue:

<canvas id="bar" 
        class="chart chart-bar" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-click="onClick"
        chart-options="options">
</canvas>

Est-ce que quelqu'un sait comment définir les width et height dans angular-chart.js?

javascriptangularjschart.jsangular-chart
5
yuro

Ok j'ai essayé cette solution et ça marche.

        <canvas id="bar"
                height="100"
                width="100"
                class="chart chart-bar" 
                chart-data="dataChart"
                chart-labels="labels"
                chart-click="onClick"
                chart-options="options">
        </canvas>

Ou définir la taille comme un style dans une classe CSS.

11
yuro

Vous pouvez également envelopper le <canvas> dans un <div>, comme suit:

<div style="height:300px;width:300px;">
    <canvas
            class="chart chart-radar"
            chart-data="$ctrl.data"
            chart-options="options"
            chart-labels="$ctrl.labels"></canvas>
</div>

Régler width et height comme dans les autres réponses ne fonctionnait pas pour moi.

6
kiltek

Pour définir la hauteur des graphiques en fonction de la taille de l'écran, j'utilise ce code: 

Dans les contrôleurs

$scope.height_chart = window.innerHeight*0.7;

Dans le modèle

<canvas height="{{height_chart}}" class="chart chart-line" data="weight.data" labels="weight.labels" series="weight.series"></canvas>

J'espère que ces codes aideront.

4
jedema

Le problème est que les valeurs des attributs hauteur et largeur sont stockées dans le graphique et ne sont pas mises à jour de la même manière que les autres attributs. Pour résoudre ce problème, vous devez ajouter un écouteur à l'événement create et modifier manuellement la hauteur dans l'objet graphique.

HTML:

<canvas
    id="chart"
    class="chart chart-horizontal-bar"
    chart-data="chart.data"
    chart-labels="chart.data.labels"
    chart-series="chart.series"
    chart-options="chart.options"
    chart-colors="chart.colors"
    height="{{ compareChart.height }}"
    width="{{ compareChart.width }}"
></canvas>

JS:

$scope.$on('chart-create', function (event, chart) {
    chart.chart.height = $scope.chart.height;
});

Vous vous attendriez à ce que $scope.chart.height change pendant une recherche AJAX ou quelque chose qui apportera de nouvelles données.

1
Matthew Dolman