1
概要
Ionic(Angular)でマウスホイールで拡大や移動などが可能なグラフを作成します
方法
標準のchart.jsに加えて、charjs-plugin-zoomを導入します。
通常のchart.jsの導入方法はこちら。
https://top.np-sys.com/general/438/
これをズーム可能にするためにcharjs-plugin-zoomを導入します。
npm i chartjs-plugin-zoom -s
そしたら、グラフを作成しているpageのtsファイルにて（今回はsrc/app/tab2/tab2.page.tsでした）
import 'chartjs-plugin-zoom';
を上部に追加して、あとはOptionsのなかに
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
},
のように指定するだけです。
冗長ですが、コードを貼り付けておきます。貼り付ける場所などの確認にご使用ください。
import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-zoom';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
@ViewChild('myChart') myChart;
@ViewChild('myChart2') myChart2;
@ViewChild('myChart3') myChart3;
bars: any;
colorArray: any;
myNum:number;
data:any= {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(150, 194, 129)', // array should have same number of elements as number of dataset
borderColor: 'rgb(150, 194, 129)',// array should have same number of elements as number of dataset
data: [
12,
14,
12,
14,
12,
41,
12,
4,
],
fill: false,
}, {
label: 'My Second dataset',
fill: false,
backgroundColor: 'rgb(50, 194, 129)', // array should have same number of elements as number of dataset
borderColor: 'rgb(50, 194, 129)',// array should have same number of elements as number of dataset
data: [
2,
4,
2,
4,
2,
4,
20,
142,
],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 200
}
}]
},
responsive:true,
maintainAspectRatio: false,
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
},
}
}
title = 'app';
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'},
{headerName: 'Make', field: 'make2' },
{headerName: 'Model', field: 'model2' },
{headerName: 'Price', field: 'price2'},
{headerName: 'Make', field: 'make3' },
{headerName: 'Model', field: 'model3' },
{headerName: 'Price', field: 'price3'},
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
{ make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
{ make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
constructor(
) { }
ionViewDidEnter() {
this.createBarChart(this.myChart);
this.createBarChart(this.myChart2);
this.createBarChart(this.myChart3);
}
onClicked(){
let v = window.innerWidth;
alert(v);
}
createBarChart(canvasId) {
this.bars = new Chart(canvasId.nativeElement, this.data);
}
}
