web-dev-qa-db-ja.com

angular 7を使用してchart.jsでグラフをズームする方法

line-chartを持っています。ズームしたいのですが、ズームできません。これが私のコードです

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

pluginに次のzoomingを使用しました

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

プロジェクトにhammerjsとangular/animationsも含めました。

更新

Typescriptがpanとzoomを認識できないのはなぜですか？

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

enter image description here

angularchart.jsangular7
3
WasiF

最初にnpm install --save chartjs-plugin-zoomを実行してnpmでインストールする必要があります。

次に、tsファイルに「chartjs-plugin-zoom」をインポートします。そして、このようなプラグインを書きます：

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

Chart.jsとchartjs-plugin-zoomをインストールする

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

Component.tsファイルで、Chartとchartjs-plugin-zoomをインポートします

import { Chart } from 'chart.js';
import '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();

Component.html

<canvas id="mapId"></canvas>
4
Vinodh Ram

ズームオプションは、options.pluginsではなくoptions設定で構成する必要があります。

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

このフィドルを参照してください-> http://jsfiddle.net/3sx8zon2/2/

4
Kunal Khivensara