円チャート(ラスター画像)

このサンプルでは、drawImageメソッドを使用してFlexPieをラスター画像としてエクスポートする方法を示します。

このサンプルでは、FlexChartBaseの継承クラスの機能を使用してラスター画像に変換してPDFに出力します。「エクスポート」ボタンをクリックすると、PDFに FlexPie の画像を追加できます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@grapecity/wijmo.chart'; import '@grapecity/wijmo.chart.render'; import * as pdf from '@grapecity/wijmo.pdf'; import { getExpenses } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let flexPie = new chart.FlexPie('#pie', { itemsSource: ((totals) => [ { name: '宿泊費', value: totals.hotel }, { name: '交通費', value: totals.transport }, { name: '食事代', value: totals.meal }, { name: '燃料費', value: totals.fuel }, { name: 'その他', value: totals.misc } ])(getExpenses().totals), binding: 'value', bindingName: 'name', innerRadius: 0.75, dataLabel: { content: '{value:c1}', position: chart.PieLabelPosition.Inside } }); // document.querySelector('#btnExport').addEventListener('click', () => { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new pdf.PdfFont('ipaexg')); // flexPie.saveImageToDataUrl(chart.ImageFormat.Png, (url) => { doc.drawText('分類別の費用合計:'); doc.drawImage(url); doc.end(); }); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing FlexPie as a raster image</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="pie"></div> <!-- Export button --> <button class="btn btn-default" id="btnExport">エクスポート</button> </div> </body> </html> // export function getExpenses() { // [5; 10] let count = 5 + Math.round(Math.random() * 5), ret = { items: [], totals: { hotel: 0, transport: 0, fuel: 0, meal: 0, misc: 0, total: 0 } }, msPerDay = 1000 * 24 * 60 * 60, curDate = Date.now() - 60 * msPerDay; // for (let i = 0; i < count; i++) { let item = { date: new Date(curDate), description: '顧客訪問', hotel: 30 + Math.random() * 200, transport: 10 + Math.random() * 150, fuel: Math.random() * 50, meal: 30 + Math.random() * 170, misc: Math.random() * 220, total: 0 }; // item.total = item.hotel + item.transport + item.fuel + item.meal + item.misc; // ret.totals.fuel += item.fuel; ret.totals.hotel += item.hotel; ret.totals.meal += item.meal; ret.totals.misc += item.misc; ret.totals.total += item.total; ret.totals.transport += item.transport; // ret.items.push(item); // curDate += msPerDay * Math.round(Math.random() * 4); } // return ret; } body { margin-bottom: 24px; } .wj-flexpie { width: 500px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import * as pdf from '@grapecity/wijmo.pdf'; import '@grapecity/wijmo.chart.render'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { IExpense, DataService } from './app.data'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; @ViewChild('flexPie') flexPie: chart.FlexPie; // constructor(@Inject(DataService) private dataService: DataService) { this.data = ((totals: IExpense) => [ { name: '宿泊費', value: totals.hotel }, { name: '交通費', value: totals.transport }, { name: '食事代', value: totals.meal }, { name: '燃料費', value: totals.fuel }, { name: 'その他', value: totals.misc } ])(dataService.getExpenses().totals); } // export() { let doc = new pdf.PdfDocument({ ended: (sender: pdf.PdfDocument, args: pdf.PdfDocumentEndedEventArgs) => pdf.saveBlob(args.blob, 'Document.pdf') }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new pdf.PdfFont('ipaexg')); // this.flexPie.saveImageToDataUrl(chart.ImageFormat.Png, (url: string) => { doc.drawText('分類別の費用合計:'); doc.drawImage(url); doc.end(); }); } } // @NgModule({ imports: [WjChartModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing FlexPie as a raster image</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-flex-pie #flexPie [binding]="'value'" [bindingName]="'name'" [innerRadius]="0.75" [itemsSource]="data"> <wj-flex-pie-data-label [content]="'{value:c1}'" [position]="'Inside'"></wj-flex-pie-data-label> </wj-flex-pie> <!-- Export button --> <button class="btn btn-default" (click)="export()">エクスポート</button> </div> import { Injectable } from '@angular/core'; // export interface IExpense { hotel: number; transport: number; fuel: number; meal: number; misc: number; total: number; } // export interface IExpenseDetails extends IExpense { date: Date; description: string; } // export interface IExpenses { items: IExpenseDetails[]; totals: IExpense; } // @Injectable() export class DataService { getExpenses(): IExpenses { // [5; 10] let count = 5 + Math.round(Math.random() * 5), ret: IExpenses = { items: [], totals: { hotel: 0, transport: 0, fuel: 0, meal: 0, misc: 0, total: 0 } }, msPerDay = 1000 * 24 * 60 * 60, curDate = Date.now() - 60 * msPerDay; // for (let i = 0; i < count; i++) { let item: IExpenseDetails = { date: new Date(curDate), description: '顧客訪問', hotel: 30 + Math.random() * 200, transport: 10 + Math.random() * 150, fuel: Math.random() * 50, meal: 30 + Math.random() * 170, misc: Math.random() * 220, total: 0 }; // item.total = item.hotel + item.transport + item.fuel + item.meal + item.misc; // ret.totals.fuel += item.fuel; ret.totals.hotel += item.hotel; ret.totals.meal += item.meal; ret.totals.misc += item.misc; ret.totals.total += item.total; ret.totals.transport += item.transport; // ret.items.push(item); // curDate += msPerDay * Math.round(Math.random() * 4); } // return ret; } } body { margin-bottom: 24px; } .wj-flexpie { width: 500px; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as pdf from "@grapecity/wijmo.pdf"; import * as chart from "@grapecity/wijmo.chart"; import * as wjFlexPie from "@grapecity/wijmo.react.chart"; import { getExpenses } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: (totals => [ { name: '宿泊費', value: totals.hotel }, { name: '交通費', value: totals.transport }, { name: '食事代', value: totals.meal }, { name: '燃料費', value: totals.fuel }, { name: 'その他', value: totals.misc } ])(getExpenses().totals) }; } render() { return <div className="container-fluid"> <wjFlexPie.FlexPie binding="value" bindingName="name" innerRadius={0.75} itemsSource={this.state.data} initialized={this.initializeFlexPie.bind(this)}> <wjFlexPie.FlexPieDataLabel content="{value:c1}" position="Inside"></wjFlexPie.FlexPieDataLabel> </wjFlexPie.FlexPie> <button className="btn btn-default" onClick={this.exportPDF.bind(this)}>エクスポート</button> </div>; } initializeFlexPie(ctrl) { this.flexPie = ctrl; } exportPDF() { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new pdf.PdfFont('ipaexg')); // this.flexPie.saveImageToDataUrl(chart.ImageFormat.Png, url => { doc.drawText('分類別の費用合計:'); doc.drawImage(url); doc.end(); }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } .wj-flexpie { width: 500px; } export function getExpenses() { // [5; 10] let count = 5 + Math.round(Math.random() * 5), ret = { items: [], totals: { hotel: 0, transport: 0, fuel: 0, meal: 0, misc: 0, total: 0 } }, msPerDay = 1000 * 24 * 60 * 60, curDate = Date.now() - 60 * msPerDay; // for (let i = 0; i < count; i++) { let item = { date: new Date(curDate), description: '顧客訪問', hotel: 30 + Math.random() * 200, transport: 10 + Math.random() * 150, fuel: Math.random() * 50, meal: 30 + Math.random() * 170, misc: Math.random() * 220, total: 0 }; // item.total = item.hotel + item.transport + item.fuel + item.meal + item.misc; // ret.totals.fuel += item.fuel; ret.totals.hotel += item.hotel; ret.totals.meal += item.meal; ret.totals.misc += item.misc; ret.totals.total += item.total; ret.totals.transport += item.transport; // ret.items.push(item); // curDate += msPerDay * Math.round(Math.random() * 4); } // return ret; } <template> <div class="container-fluid"> <wj-flex-pie binding="value" bindingName="name" :innerRadius=0.75 :itemsSource="data" :initialized="initializeFlexPie"> <wj-flex-pie-data-label content="{value:c1}" position="Inside"></wj-flex-pie-data-label> </wj-flex-pie> <!-- Export button --> <button class="btn btn-default" @click="exportPDF">エクスポート</button> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import Vue from 'vue'; import { WjChartModule } from '@grapecity/wijmo.vue2.chart'; import * as chart from '@grapecity/wijmo.chart'; import '@grapecity/wijmo.chart.render'; import * as pdf from '@grapecity/wijmo.pdf'; // import { getExpenses } from './data'; // let App = Vue.extend({ name: 'app', data() { return { data: (totals => [ { name: '宿泊費', value: totals.hotel }, { name: '交通費', value: totals.transport }, { name: '食事代', value: totals.meal }, { name: '燃料費', value: totals.fuel }, { name: 'その他', value: totals.misc } ])(getExpenses().totals) } }, methods: { initializeFlexPie(ctrl) { this.flexPie = ctrl; }, exportPDF() { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new pdf.PdfFont('ipaexg')); // this.flexPie.saveImageToDataUrl(chart.ImageFormat.Png, url => { doc.drawText('分類別の費用合計:'); doc.drawImage(url); doc.end(); }); } } }) // new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } .wj-flexpie { width: 500px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing FlexPie as a raster image</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getExpenses() { // [5; 10] let count = 5 + Math.round(Math.random() * 5), ret = { items: [], totals: { hotel: 0, transport: 0, fuel: 0, meal: 0, misc: 0, total: 0 } }, msPerDay = 1000 * 24 * 60 * 60, curDate = Date.now() - 60 * msPerDay; // for (let i = 0; i < count; i++) { let item = { date: new Date(curDate), description: '顧客訪問', hotel: 30 + Math.random() * 200, transport: 10 + Math.random() * 150, fuel: Math.random() * 50, meal: 30 + Math.random() * 170, misc: Math.random() * 220, total: 0 }; // item.total = item.hotel + item.transport + item.fuel + item.meal + item.misc; // ret.totals.fuel += item.fuel; ret.totals.hotel += item.hotel; ret.totals.meal += item.meal; ret.totals.misc += item.misc; ret.totals.total += item.total; ret.totals.transport += item.transport; // ret.items.push(item); // curDate += msPerDay * Math.round(Math.random() * 4); } // return ret; }