4
votes

Comment zoomer des graphiques dans chart.js en utilisant angular 7

J'ai un graphique en courbes et je veux l'agrandir mais je ne peux pas le faire. Voici mon code

// package.json
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div class="row">
    <div class="col d-flex justify-content-center">
        <canvas id="myChart" style="max-width:95%;height:300px !important;"></canvas>
    </div>
</div>

J'ai utilisé le plugin suivant pour zoomer

https://github.com/chartjs/chartjs-plugin-zoom#readme

J'ai également inclus hammerjs et angular / animations dans mon projet.

Mettre à jour

Pourquoi pan code> et zoom sont inconnus du typographie?

let ctx = document.getElementById('myChart')

let chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [7, 10, 3, 5, 2, 3],
          fill: true,
          backgroundColor: 'orange',
          borderColor: 'green',
          pointBorderColor: 'red',
          pointBackgroundColor: 'red'
        }]
      },
      options: {
        plugins: {
          pan: {
            enabled: true,
            mode: 'x',
            onPan: function () { console.log('I was panned!!!'); }
          },
          zoom: {
            enabled: true,
            drag: true,
            mode: 'x',
            onZoom: function () { console.log('I was zoomed!!!'); }
          },
        },
        responsive: true,
      }
    })

p >

angular chart.js angular7

0 commentaires

3 Réponses :

6
votes

Les options de zoom doivent être configurées sous le paramètre options et non options.plugins .

  options: {
    pan: {
      enabled: true,
      mode: 'x',     
    },
    zoom: {
      enabled: true,         
      mode: 'x',     
    },
    responsive: true
  }

Voir ce violon -> http://jsfiddle.net/3sx8zon2/ 2 /

6 commentaires

mais en tapuscrit, cela donne une erreur de compilation car il n'y a pas de propriétés pan ou zoom

et où vous avez importé le zoom-plugin ?

C'est dans les sources du violon. Vérifiez si vous avez correctement référencé la bibliothèque. Et dans le code que vous avez indiqué, définissez pan et zoom sous les plugins, ce qui est incorrect, cela devrait être sous options

est-ce que dactylographié donne une erreur de compilation? car dans les options il n'y a pas d'options pan ou zoom

J'ai testé et cela fonctionne. Pourquoi pan et zoom sont inconnus des options dans le texte dactylographié?

Il a été mis à jour depuis votre réponse. Il fonctionnera désormais à l'intérieur de l'attribut de zoom dans les plugins

5
votes

Tout d'abord, vous devez exécuter npm install --save chartjs-plugin-zoom pour l'installer avec npm.

Ensuite, importez "chartjs-plugin-zoom" dans votre fichier ts. et écrivez le plugin comme ceci:

    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          enabled: true,
          mode: 'x'
        }
      }
    },

0 commentaires

4
votes

Installez chart.js et chartjs-plugin-zoom

<canvas id="mapId"></canvas>

Dans le fichier d'importation Component.ts Chart et chartjs-plugin-zoom

let myChart = new Chart('mapId', {
type: 'bar',
data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
},
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
        },
        zoom: {
          enabled: true,
          mode: 'xy'
        }
      }
    }
  }
});
myChart.render();

Logique pour charger le graphique

import { Chart } from 'chart.js';
import 'chartjs-plugin-zoom';

In Component.html

npm i chart.js -s
npm i chartjs-plugin-zoom -s

1 commentaires

cet exemple fonctionne bien avec chartjs-plugin-zoom@0.7.7 et il est important de noter que la section 'plugins' ... est placée dans la section 'options'. J'ai manqué cela dans la documentation du plugin.