チャート:対数軸

logBaseプロパティを使用すると、精度を犠牲にすることなく、クラスタ化されたデータを拡散し、グラフの明瞭度を向上できます。

formatプロパティを使用してラベルを自動的に拡大/縮小し、非常に大きな生の値ではなく数千または数百万を表示します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), chartType: 'Bubble', bindingX: 'pop', series: [ { name: 'GDP', binding: 'gdp,pci', } ], tooltip: { content: '<b>{country}</b>:<br/>{pci:n0} ドル(年間1人あたり)' }, axisX: { title: '人口(100万人)', format: 'g4,,', logBase: 10 }, axisY: { title: 'GDP(10億ドル)', format: 'g4,', logBase: 10 }, legend: { position: 'None' } }); // // toggle log scale document.querySelector('#logScale').addEventListener('click', e => { var logBase = e.target.checked ? 10 : null; theChart.axisX.logBase = logBase; theChart.axisY.logBase = logBase; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Logarithmic Axis</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"> <label for="logScale">対数軸</label> <input id="logScale" type="checkbox" checked="checked"> <div id="theChart"></div> </div> </body> </html> // export function getData() { let arr = [ { country: 'アメリカ', pop: 320723000, gdp: 17348075 }, { country: '中国', pop: 1357000000, gdp: 10356508 }, { country: '日本', pop: 127300000, gdp: 4602367 }, { country: 'ドイツ', pop: 80620000, gdp: 3874437 }, { country: 'イギリス', pop: 64596800, gdp: 2950039 }, { country: 'フランス', pop: 65821885, gdp: 2833687 }, { country: 'ブラジル', pop: 200400000, gdp: 2346583 }, { country: 'イタリア', pop: 60705991, gdp: 2147744 }, { country: 'インド', pop: 1252000000, gdp: 2051228 }, { country: 'ロシア', pop: 143500000, gdp: 1860598 }, { country: 'カナダ', pop: 34482779, gdp: 1785387 }, { country: 'オーストラリア', pop: 24170869, gdp: 1442722 }, { country: '韓国', pop: 48219000, gdp: 1410383 }, { country: 'スペイン', pop: 46162024, gdp: 1406538 }, { country: 'メキシコ', pop: 122300000, gdp: 1291062 }, { country: 'インドネシア', pop: 249900000, gdp: 888648 }, { country: 'オランダ', pop: 16715489, gdp: 880716 }, { country: 'トルコ', pop: 76667864, gdp: 798332 }, { country: 'サウジアラビア', pop: 27136977, gdp: 746248 }, { country: 'スイス', pop: 8039060, gdp: 703852 }, { country: 'ナイジェリア', pop: 173600000, gdp: 573999 }, { country: 'スウェーデン', pop: 9471174, gdp: 570591 }, { country: 'ポーランド', pop: 38092000, gdp: 547894 }, { country: 'アルゼンチン', pop: 40117096, gdp: 543061 }, { country: 'ベルギー', pop: 10839905, gdp: 534230 }, { country: '台湾', pop: 23197947, gdp: 529597 }, { country: 'ノルウェー', pop: 5316800, gdp: 499817 }, { country: 'オーストリア', pop: 8419776, gdp: 437582 }, { country: 'イラン', pop: 80117000, gdp: 416490 }, { country: 'タイ', pop: 69519000, gdp: 404824 }, { country: 'アラブ首長国連邦', pop: 8264070, gdp: 399451 }, { country: 'コロンビア', pop: 48389000, gdp: 377867 }, { country: '南アフリカ', pop: 50586757, gdp: 350082 }, { country: 'デンマーク', pop: 5579204, gdp: 342362 }, { country: 'マレーシア', pop: 28334135, gdp: 338108 }, { country: 'シンガポール', pop: 5183700, gdp: 307872 }, { country: 'イスラエル', pop: 7798600, gdp: 305673 }, { country: '香港', pop: 7108100, gdp: 290896 }, { country: 'エジプト', pop: 88094000, gdp: 286435 }, { country: 'フィリピン', pop: 98390000, gdp: 284618 }, { country: 'フィンランド', pop: 5394389, gdp: 272649 }, { country: 'チリ', pop: 17248450, gdp: 258017 }, { country: 'アイルランド', pop: 4581269, gdp: 250814 }, { country: 'パキスタン', pop: 191282000, gdp: 246849 }, { country: 'ギリシャ', pop: 10787690, gdp: 237970 }, { country: 'ポルトガル', pop: 10555853, gdp: 229948 }, { country: 'イラク', pop: 32105000, gdp: 223508 }, { country: 'カザフスタン', pop: 16615000, gdp: 216036 }, { country: 'アルジェリア', pop: 36300000, gdp: 213518 }, { country: 'カタール', pop: 1699435, gdp: 210109 }, { country: 'ベネズエラ', pop: 31220000, gdp: 206252 }, { country: 'チェコ共和国', pop: 10542080, gdp: 205270 }, { country: 'ペルー', pop: 29797694, gdp: 202642 }, { country: 'ルーマニア', pop: 21436000, gdp: 199093 }, { country: 'ニュージーランド', pop: 4577100, gdp: 197502 }, { country: 'ベトナム', pop: 89700000, gdp: 185897 }, { country: 'バングラデシュ', pop: 156600000, gdp: 183824 }, { country: 'クウェート', pop: 2818000, gdp: 172608 }, { country: 'ハンガリー', pop: 9985722, gdp: 136989 }, { country: 'ウクライナ', pop: 45668028, gdp: 130660 }, { country: 'アンゴラ', pop: 19618000, gdp: 129326 }, { country: 'モロッコ', pop: 33803400, gdp: 110009 }, { country: 'エクアドル', pop: 14483499, gdp: 100543 }, { country: 'スロバキア', pop: 5437126, gdp: 99869 }, { country: 'オマーン', pop: 2773479, gdp: 77779 }, { country: 'シリア', pop: 23362000, gdp: 77460 }, { country: 'ベラルーシ', pop: 9468000, gdp: 76139 }, { country: 'スリランカ', pop: 20653000, gdp: 74924 }, { country: 'スーダン', pop: 30894000, gdp: 74766 }, { country: 'アゼルバイジャン', pop: 9111100, gdp: 74145 }, { country: 'ルクセンブルク', pop: 511840, gdp: 65683 }, { country: 'ドミニカ共和国', pop: 9378818, gdp: 64058 }, { country: 'ミャンマー', pop: 48337000, gdp: 63135 }, { country: 'ウズベキスタン', pop: 28000000, gdp: 62613 }, { country: 'ケニア', pop: 38610097, gdp: 60937 }, { country: 'グアテマラ', pop: 14713763, gdp: 58728 }, { country: 'ウルグアイ', pop: 3368595, gdp: 57471 }, { country: 'クロアチア', pop: 4290612, gdp: 57073 }, { country: 'ブルガリア', pop: 7364570, gdp: 55824 }, { country: 'エチオピア', pop: 94100000, gdp: 54809 }, { country: 'レバノン', pop: 4259000, gdp: 50028 }, { country: 'スロベニア', pop: 2081660, gdp: 49570 }, { country: 'コスタリカ', pop: 4563539, gdp: 49553 }, { country: 'チュニジア', pop: 10673800, gdp: 48633 }, { country: 'リトアニア', pop: 3207100, gdp: 48288 }, { country: 'タンザニア', pop: 43188000, gdp: 48089 }, { country: 'トルクメニスタン', pop: 5105000, gdp: 47932 }, { country: 'セルビア', pop: 7120666, gdp: 43866 }, { country: 'パナマ', pop: 3405813, gdp: 43777 }, { country: 'イエメン', pop: 23833000, gdp: 43229 }, { country: 'リビア', pop: 6423000, gdp: 41148 }, { country: 'ガーナ', pop: 24233431, gdp: 38616 }, { country: 'コンゴ民主共和国', pop: 67758000, gdp: 35918 }, { country: 'ヨルダン', pop: 6783300, gdp: 35878 }, { country: 'バーレーン', pop: 1234571, gdp: 33862 }, { country: 'コートジボワール', pop: 21395000, gdp: 33741 }, { country: 'ボリビア', pop: 10426154, gdp: 33237 }, { country: 'ラトビア', pop: 2209000, gdp: 31972 }, { country: 'カメルーン', pop: 19406100, gdp: 31777 }, { country: 'パラグアイ', pop: 6337127, gdp: 30220 }, { country: 'トリニダード・トバゴ', pop: 1317714, gdp: 28874 }, { country: 'ウガンダ', pop: 32939800, gdp: 27616 }, { country: 'ザンビア', pop: 13046508, gdp: 26611 }, { country: 'エストニア', pop: 1340194, gdp: 26506 }, { country: 'エルサルバドル', pop: 6227000, gdp: 25164 }, { country: 'キプロス', pop: 803200, gdp: 23263 }, { country: 'アフガニスタン', pop: 32358000, gdp: 20444 }, { country: 'ネパール', pop: 26620809, gdp: 19761 }, { country: 'ホンジュラス', pop: 8215313, gdp: 19511 }, { country: 'ガボン', pop: 1534000, gdp: 18209 }, { country: 'ボスニア・ヘルツェゴビナ', pop: 3843126, gdp: 18165 }, { country: 'ブルネイ', pop: 422700, gdp: 17104 }, { country: 'アイスランド', pop: 318452, gdp: 17036 }, { country: 'パプアニューギニア', pop: 7014000, gdp: 16809 }, { country: 'モザンビーク', pop: 23049621, gdp: 16684 }, { country: 'カンボジア', pop: 13395682, gdp: 16551 }, { country: 'ジョージア', pop: 4469200, gdp: 16536 }, { country: 'セネガル', pop: 12855153, gdp: 15683 }, { country: '赤道ギニア', pop: 720000, gdp: 15530 }, { country: 'ボツワナ', pop: 2031000, gdp: 15217 }, { country: '南スーダン', pop: 8260490, gdp: 14304 }, { country: 'チャド', pop: 10329208, gdp: 13945 }, { country: 'ジンバブエ', pop: 12754000, gdp: 13833 }, { country: 'ジャマイカ', pop: 2705800, gdp: 13709 }, { country: 'ナミビア', pop: 2324000, gdp: 13632 }, { country: 'コンゴ共和国', pop: 4140000, gdp: 13552 }, { country: 'アルバニア', pop: 3194972, gdp: 13276 }, { country: 'モーリシャス', pop: 1280924, gdp: 12588 }, { country: 'ブルキナファソ', pop: 15730977, gdp: 12503 }, { country: 'マリ', pop: 14517176, gdp: 12094 }, { country: 'モンゴル', pop: 2736800, gdp: 12037 }, { country: 'ニカラグア', pop: 5815524, gdp: 11806 }, { country: 'ラオス', pop: 6348800, gdp: 11681 }, { country: 'アルメニア', pop: 3266300, gdp: 11644 }, { country: 'マケドニア', pop: 2057284, gdp: 11342 }, { country: 'マダガスカル', pop: 18866000, gdp: 10674 }, { country: 'マルタ', pop: 417617, gdp: 10514 }, { country: 'タジキスタン', pop: 7616000, gdp: 9242 }, { country: 'ハイチ', pop: 10085214, gdp: 8711 }, { country: 'ベニン', pop: 9100000, gdp: 8685 }, { country: 'バハマ', pop: 353658, gdp: 8511 }, { country: 'ニジェール', pop: 15730754, gdp: 8024 }, { country: 'モルドバ', pop: 3560400, gdp: 7962 }, { country: 'ルワンダ', pop: 10412826, gdp: 7897 }, { country: 'キルギスタン', pop: 5477600, gdp: 7402 }, { country: 'コソボ', pop: 1870981, gdp: 7319 }, { country: 'ギニア', pop: 10217591, gdp: 6707 }, { country: 'マラウイ', pop: 13077160, gdp: 6055 }, { country: 'スリナム', pop: 529000, gdp: 5210 }, { country: 'モーリタニア', pop: 3340627, gdp: 5081 }, { country: '東ティモール', pop: 1066409, gdp: 4970 }, { country: 'シエラレオネ', pop: 5997000, gdp: 4815 }, { country: 'トーゴ', pop: 5753324, gdp: 4594 }, { country: 'モンテネグロ', pop: 620029, gdp: 4551 }, { country: 'スワジランド', pop: 1203000, gdp: 4416 }, { country: 'バルバドス', pop: 276302, gdp: 4354 }, { country: 'フィジー', pop: 868000, gdp: 4289 }, { country: 'エリトリア', pop: 5415000, gdp: 3858 }, { country: 'ブルンジ', pop: 8575000, gdp: 3094 }, { country: 'ガイアナ', pop: 784894, gdp: 3059 }, { country: 'モルディブ', pop: 317280, gdp: 2885 }, { country: 'レソト', pop: 2194000, gdp: 2220 }, { country: 'リベリア', pop: 3476608, gdp: 2013 }, { country: 'ブータン', pop: 708265, gdp: 1983 }, { country: 'カーボベルデ', pop: 491575, gdp: 1858 }, { country: 'サンマリノ', pop: 32093, gdp: 1786 }, { country: '中央アフリカ共和国', pop: 4487000, gdp: 1726 }, { country: 'ベリーズ', pop: 312698, gdp: 1699 }, { country: 'ジブチ', pop: 818159, gdp: 1589 }, { country: 'セイシェル', pop: 90945, gdp: 1423 }, { country: 'セントルシア', pop: 166526, gdp: 1404 }, { country: 'アンティグアバーブーダ', pop: 89138, gdp: 1248 }, { country: 'ソロモン諸島', pop: 542287, gdp: 1155 }, { country: 'ギニアビサウ', pop: 1520830, gdp: 1111 }, { country: 'グレナダ', pop: 110821, gdp: 912 }, { country: 'セントクリストファーネイビス', pop: 51970, gdp: 852 }, { country: 'サモア', pop: 184032, gdp: 827 }, { country: 'ガンビア', pop: 1776000, gdp: 824 }, { country: 'バヌアツ', pop: 234023, gdp: 822 }, { country: 'セントビンセント・グレナディーン諸島', pop: 100892, gdp: 729 }, { country: 'コモロ', pop: 754000, gdp: 697 }, { country: 'ドミニカ', pop: 71685, gdp: 524 }, { country: 'トンガ', pop: 105000, gdp: 438 }, { country: 'サントメプリンシペ', pop: 169000, gdp: 338 }, { country: 'ミクロネシア', pop: 102624, gdp: 308 }, { country: 'パラオ', pop: 21000, gdp: 249 }, { country: 'マーシャル諸島', pop: 54305, gdp: 193 }, { country: 'キリバス', pop: 101000, gdp: 181 }, { country: 'ツバル', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point arr.forEach(country => country.pci = country.gdp / country.pop * 1e6); // US$/year/capita // return arr; } .wj-flexchart { height: 300px; margin: 10px 0; } .wj-flexchart g.wj-series-group ellipse { fill: gold; stroke: orange; opacity: .5 } .wj-flexchart g.wj-series-group ellipse:hover { fill: orange; opacity: 1; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; logBase: number; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.logBase = 10; } } // @NgModule({ imports: [WjChartModule, BrowserModule, FormsModule], 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>GrapeCity Wijmo FlexChart Logarithmic Axis</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"> <div class="form-group"> <label for="logScale">対数軸</label> <input id="logScale" #ls type="checkbox" checked="checked" (change)="this.logBase = ls.checked ? 10 : null"> <wj-flex-chart [itemsSource]="data" chartType="Bubble" bindingX="pop" tooltipContent="&lt;b&gt;{country}&lt;/b&gt;:&lt;br/&gt;{pci:n0} ドル(年間1人あたり)"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series name="GDP" binding="gdp,pci"></wj-flex-chart-series> <wj-flex-chart-axis wjProperty="axisX" title="人口(100万人)" [axisLine]="true" format="g4,," [logBase]="logBase"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" title="GDP(10億ドル)" format="g4," [logBase]="logBase"></wj-flex-chart-axis> </wj-flex-chart> </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let arr = [ { country: 'アメリカ', pop: 320723000, gdp: 17348075 }, { country: '中国', pop: 1357000000, gdp: 10356508 }, { country: '日本', pop: 127300000, gdp: 4602367 }, { country: 'ドイツ', pop: 80620000, gdp: 3874437 }, { country: 'イギリス', pop: 64596800, gdp: 2950039 }, { country: 'フランス', pop: 65821885, gdp: 2833687 }, { country: 'ブラジル', pop: 200400000, gdp: 2346583 }, { country: 'イタリア', pop: 60705991, gdp: 2147744 }, { country: 'インド', pop: 1252000000, gdp: 2051228 }, { country: 'ロシア', pop: 143500000, gdp: 1860598 }, { country: 'カナダ', pop: 34482779, gdp: 1785387 }, { country: 'オーストラリア', pop: 24170869, gdp: 1442722 }, { country: '韓国', pop: 48219000, gdp: 1410383 }, { country: 'スペイン', pop: 46162024, gdp: 1406538 }, { country: 'メキシコ', pop: 122300000, gdp: 1291062 }, { country: 'インドネシア', pop: 249900000, gdp: 888648 }, { country: 'オランダ', pop: 16715489, gdp: 880716 }, { country: 'トルコ', pop: 76667864, gdp: 798332 }, { country: 'サウジアラビア', pop: 27136977, gdp: 746248 }, { country: 'スイス', pop: 8039060, gdp: 703852 }, { country: 'ナイジェリア', pop: 173600000, gdp: 573999 }, { country: 'スウェーデン', pop: 9471174, gdp: 570591 }, { country: 'ポーランド', pop: 38092000, gdp: 547894 }, { country: 'アルゼンチン', pop: 40117096, gdp: 543061 }, { country: 'ベルギー', pop: 10839905, gdp: 534230 }, { country: '台湾', pop: 23197947, gdp: 529597 }, { country: 'ノルウェー', pop: 5316800, gdp: 499817 }, { country: 'オーストリア', pop: 8419776, gdp: 437582 }, { country: 'イラン', pop: 80117000, gdp: 416490 }, { country: 'タイ', pop: 69519000, gdp: 404824 }, { country: 'アラブ首長国連邦', pop: 8264070, gdp: 399451 }, { country: 'コロンビア', pop: 48389000, gdp: 377867 }, { country: '南アフリカ', pop: 50586757, gdp: 350082 }, { country: 'デンマーク', pop: 5579204, gdp: 342362 }, { country: 'マレーシア', pop: 28334135, gdp: 338108 }, { country: 'シンガポール', pop: 5183700, gdp: 307872 }, { country: 'イスラエル', pop: 7798600, gdp: 305673 }, { country: '香港', pop: 7108100, gdp: 290896 }, { country: 'エジプト', pop: 88094000, gdp: 286435 }, { country: 'フィリピン', pop: 98390000, gdp: 284618 }, { country: 'フィンランド', pop: 5394389, gdp: 272649 }, { country: 'チリ', pop: 17248450, gdp: 258017 }, { country: 'アイルランド', pop: 4581269, gdp: 250814 }, { country: 'パキスタン', pop: 191282000, gdp: 246849 }, { country: 'ギリシャ', pop: 10787690, gdp: 237970 }, { country: 'ポルトガル', pop: 10555853, gdp: 229948 }, { country: 'イラク', pop: 32105000, gdp: 223508 }, { country: 'カザフスタン', pop: 16615000, gdp: 216036 }, { country: 'アルジェリア', pop: 36300000, gdp: 213518 }, { country: 'カタール', pop: 1699435, gdp: 210109 }, { country: 'ベネズエラ', pop: 31220000, gdp: 206252 }, { country: 'チェコ共和国', pop: 10542080, gdp: 205270 }, { country: 'ペルー', pop: 29797694, gdp: 202642 }, { country: 'ルーマニア', pop: 21436000, gdp: 199093 }, { country: 'ニュージーランド', pop: 4577100, gdp: 197502 }, { country: 'ベトナム', pop: 89700000, gdp: 185897 }, { country: 'バングラデシュ', pop: 156600000, gdp: 183824 }, { country: 'クウェート', pop: 2818000, gdp: 172608 }, { country: 'ハンガリー', pop: 9985722, gdp: 136989 }, { country: 'ウクライナ', pop: 45668028, gdp: 130660 }, { country: 'アンゴラ', pop: 19618000, gdp: 129326 }, { country: 'モロッコ', pop: 33803400, gdp: 110009 }, { country: 'エクアドル', pop: 14483499, gdp: 100543 }, { country: 'スロバキア', pop: 5437126, gdp: 99869 }, { country: 'オマーン', pop: 2773479, gdp: 77779 }, { country: 'シリア', pop: 23362000, gdp: 77460 }, { country: 'ベラルーシ', pop: 9468000, gdp: 76139 }, { country: 'スリランカ', pop: 20653000, gdp: 74924 }, { country: 'スーダン', pop: 30894000, gdp: 74766 }, { country: 'アゼルバイジャン', pop: 9111100, gdp: 74145 }, { country: 'ルクセンブルク', pop: 511840, gdp: 65683 }, { country: 'ドミニカ共和国', pop: 9378818, gdp: 64058 }, { country: 'ミャンマー', pop: 48337000, gdp: 63135 }, { country: 'ウズベキスタン', pop: 28000000, gdp: 62613 }, { country: 'ケニア', pop: 38610097, gdp: 60937 }, { country: 'グアテマラ', pop: 14713763, gdp: 58728 }, { country: 'ウルグアイ', pop: 3368595, gdp: 57471 }, { country: 'クロアチア', pop: 4290612, gdp: 57073 }, { country: 'ブルガリア', pop: 7364570, gdp: 55824 }, { country: 'エチオピア', pop: 94100000, gdp: 54809 }, { country: 'レバノン', pop: 4259000, gdp: 50028 }, { country: 'スロベニア', pop: 2081660, gdp: 49570 }, { country: 'コスタリカ', pop: 4563539, gdp: 49553 }, { country: 'チュニジア', pop: 10673800, gdp: 48633 }, { country: 'リトアニア', pop: 3207100, gdp: 48288 }, { country: 'タンザニア', pop: 43188000, gdp: 48089 }, { country: 'トルクメニスタン', pop: 5105000, gdp: 47932 }, { country: 'セルビア', pop: 7120666, gdp: 43866 }, { country: 'パナマ', pop: 3405813, gdp: 43777 }, { country: 'イエメン', pop: 23833000, gdp: 43229 }, { country: 'リビア', pop: 6423000, gdp: 41148 }, { country: 'ガーナ', pop: 24233431, gdp: 38616 }, { country: 'コンゴ民主共和国', pop: 67758000, gdp: 35918 }, { country: 'ヨルダン', pop: 6783300, gdp: 35878 }, { country: 'バーレーン', pop: 1234571, gdp: 33862 }, { country: 'コートジボワール', pop: 21395000, gdp: 33741 }, { country: 'ボリビア', pop: 10426154, gdp: 33237 }, { country: 'ラトビア', pop: 2209000, gdp: 31972 }, { country: 'カメルーン', pop: 19406100, gdp: 31777 }, { country: 'パラグアイ', pop: 6337127, gdp: 30220 }, { country: 'トリニダード・トバゴ', pop: 1317714, gdp: 28874 }, { country: 'ウガンダ', pop: 32939800, gdp: 27616 }, { country: 'ザンビア', pop: 13046508, gdp: 26611 }, { country: 'エストニア', pop: 1340194, gdp: 26506 }, { country: 'エルサルバドル', pop: 6227000, gdp: 25164 }, { country: 'キプロス', pop: 803200, gdp: 23263 }, { country: 'アフガニスタン', pop: 32358000, gdp: 20444 }, { country: 'ネパール', pop: 26620809, gdp: 19761 }, { country: 'ホンジュラス', pop: 8215313, gdp: 19511 }, { country: 'ガボン', pop: 1534000, gdp: 18209 }, { country: 'ボスニア・ヘルツェゴビナ', pop: 3843126, gdp: 18165 }, { country: 'ブルネイ', pop: 422700, gdp: 17104 }, { country: 'アイスランド', pop: 318452, gdp: 17036 }, { country: 'パプアニューギニア', pop: 7014000, gdp: 16809 }, { country: 'モザンビーク', pop: 23049621, gdp: 16684 }, { country: 'カンボジア', pop: 13395682, gdp: 16551 }, { country: 'ジョージア', pop: 4469200, gdp: 16536 }, { country: 'セネガル', pop: 12855153, gdp: 15683 }, { country: '赤道ギニア', pop: 720000, gdp: 15530 }, { country: 'ボツワナ', pop: 2031000, gdp: 15217 }, { country: '南スーダン', pop: 8260490, gdp: 14304 }, { country: 'チャド', pop: 10329208, gdp: 13945 }, { country: 'ジンバブエ', pop: 12754000, gdp: 13833 }, { country: 'ジャマイカ', pop: 2705800, gdp: 13709 }, { country: 'ナミビア', pop: 2324000, gdp: 13632 }, { country: 'コンゴ共和国', pop: 4140000, gdp: 13552 }, { country: 'アルバニア', pop: 3194972, gdp: 13276 }, { country: 'モーリシャス', pop: 1280924, gdp: 12588 }, { country: 'ブルキナファソ', pop: 15730977, gdp: 12503 }, { country: 'マリ', pop: 14517176, gdp: 12094 }, { country: 'モンゴル', pop: 2736800, gdp: 12037 }, { country: 'ニカラグア', pop: 5815524, gdp: 11806 }, { country: 'ラオス', pop: 6348800, gdp: 11681 }, { country: 'アルメニア', pop: 3266300, gdp: 11644 }, { country: 'マケドニア', pop: 2057284, gdp: 11342 }, { country: 'マダガスカル', pop: 18866000, gdp: 10674 }, { country: 'マルタ', pop: 417617, gdp: 10514 }, { country: 'タジキスタン', pop: 7616000, gdp: 9242 }, { country: 'ハイチ', pop: 10085214, gdp: 8711 }, { country: 'ベニン', pop: 9100000, gdp: 8685 }, { country: 'バハマ', pop: 353658, gdp: 8511 }, { country: 'ニジェール', pop: 15730754, gdp: 8024 }, { country: 'モルドバ', pop: 3560400, gdp: 7962 }, { country: 'ルワンダ', pop: 10412826, gdp: 7897 }, { country: 'キルギスタン', pop: 5477600, gdp: 7402 }, { country: 'コソボ', pop: 1870981, gdp: 7319 }, { country: 'ギニア', pop: 10217591, gdp: 6707 }, { country: 'マラウイ', pop: 13077160, gdp: 6055 }, { country: 'スリナム', pop: 529000, gdp: 5210 }, { country: 'モーリタニア', pop: 3340627, gdp: 5081 }, { country: '東ティモール', pop: 1066409, gdp: 4970 }, { country: 'シエラレオネ', pop: 5997000, gdp: 4815 }, { country: 'トーゴ', pop: 5753324, gdp: 4594 }, { country: 'モンテネグロ', pop: 620029, gdp: 4551 }, { country: 'スワジランド', pop: 1203000, gdp: 4416 }, { country: 'バルバドス', pop: 276302, gdp: 4354 }, { country: 'フィジー', pop: 868000, gdp: 4289 }, { country: 'エリトリア', pop: 5415000, gdp: 3858 }, { country: 'ブルンジ', pop: 8575000, gdp: 3094 }, { country: 'ガイアナ', pop: 784894, gdp: 3059 }, { country: 'モルディブ', pop: 317280, gdp: 2885 }, { country: 'レソト', pop: 2194000, gdp: 2220 }, { country: 'リベリア', pop: 3476608, gdp: 2013 }, { country: 'ブータン', pop: 708265, gdp: 1983 }, { country: 'カーボベルデ', pop: 491575, gdp: 1858 }, { country: 'サンマリノ', pop: 32093, gdp: 1786 }, { country: '中央アフリカ共和国', pop: 4487000, gdp: 1726 }, { country: 'ベリーズ', pop: 312698, gdp: 1699 }, { country: 'ジブチ', pop: 818159, gdp: 1589 }, { country: 'セイシェル', pop: 90945, gdp: 1423 }, { country: 'セントルシア', pop: 166526, gdp: 1404 }, { country: 'アンティグアバーブーダ', pop: 89138, gdp: 1248 }, { country: 'ソロモン諸島', pop: 542287, gdp: 1155 }, { country: 'ギニアビサウ', pop: 1520830, gdp: 1111 }, { country: 'グレナダ', pop: 110821, gdp: 912 }, { country: 'セントクリストファーネイビス', pop: 51970, gdp: 852 }, { country: 'サモア', pop: 184032, gdp: 827 }, { country: 'ガンビア', pop: 1776000, gdp: 824 }, { country: 'バヌアツ', pop: 234023, gdp: 822 }, { country: 'セントビンセント・グレナディーン諸島', pop: 100892, gdp: 729 }, { country: 'コモロ', pop: 754000, gdp: 697 }, { country: 'ドミニカ', pop: 71685, gdp: 524 }, { country: 'トンガ', pop: 105000, gdp: 438 }, { country: 'サントメプリンシペ', pop: 169000, gdp: 338 }, { country: 'ミクロネシア', pop: 102624, gdp: 308 }, { country: 'パラオ', pop: 21000, gdp: 249 }, { country: 'マーシャル諸島', pop: 54305, gdp: 193 }, { country: 'キリバス', pop: 101000, gdp: 181 }, { country: 'ツバル', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point arr.forEach((country: any) => country.pci = country.gdp / country.pop * 1e6); // US$/year/capita // return arr; } } .wj-flexchart { height: 300px; margin: 10px 0; } .wj-flexchart g.wj-series-group ellipse { fill: gold; stroke: orange; opacity: .5 } .wj-flexchart g.wj-series-group ellipse:hover { fill: orange; opacity: 1; } body { margin-bottom: 24pt; } 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 wjChart from "@grapecity/wijmo.react.chart"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), logBase: 10 }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="logScale">対数軸</label> <input id="logScale" type="checkbox" defaultChecked onClick={this.changeLogBase.bind(this)}/> <wjChart.FlexChart itemsSource={this.state.data} chartType="Bubble" bindingX="pop" tooltipContent="&lt;b&gt;{country}&lt;/b&gt;:&lt;br/&gt;{pci:n0} ドル(年間1人あたり)"> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries name="GDP" binding="gdp,pci"></wjChart.FlexChartSeries> <wjChart.FlexChartAxis wjProperty="axisX" title="人口(100万人)" axisLine={true} format="g4,," logBase={this.state.logBase}> </wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisY" title="GDP(10億ドル)" format="g4," logBase={this.state.logBase}> </wjChart.FlexChartAxis> </wjChart.FlexChart> </div> </div>; } changeLogBase(chk) { this.setState({ logBase: chk.target.checked ? 10 : null }); } } 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; } label { margin-right: 3px; } .wj-flexchart g.wj-series-group ellipse { fill: gold; stroke: orange; opacity: .5 } .wj-flexchart g.wj-series-group ellipse:hover { fill: orange; opacity: 1; } export function getData() { let arr = [ { country: 'アメリカ', pop: 320723000, gdp: 17348075 }, { country: '中国', pop: 1357000000, gdp: 10356508 }, { country: '日本', pop: 127300000, gdp: 4602367 }, { country: 'ドイツ', pop: 80620000, gdp: 3874437 }, { country: 'イギリス', pop: 64596800, gdp: 2950039 }, { country: 'フランス', pop: 65821885, gdp: 2833687 }, { country: 'ブラジル', pop: 200400000, gdp: 2346583 }, { country: 'イタリア', pop: 60705991, gdp: 2147744 }, { country: 'インド', pop: 1252000000, gdp: 2051228 }, { country: 'ロシア', pop: 143500000, gdp: 1860598 }, { country: 'カナダ', pop: 34482779, gdp: 1785387 }, { country: 'オーストラリア', pop: 24170869, gdp: 1442722 }, { country: '韓国', pop: 48219000, gdp: 1410383 }, { country: 'スペイン', pop: 46162024, gdp: 1406538 }, { country: 'メキシコ', pop: 122300000, gdp: 1291062 }, { country: 'インドネシア', pop: 249900000, gdp: 888648 }, { country: 'オランダ', pop: 16715489, gdp: 880716 }, { country: 'トルコ', pop: 76667864, gdp: 798332 }, { country: 'サウジアラビア', pop: 27136977, gdp: 746248 }, { country: 'スイス', pop: 8039060, gdp: 703852 }, { country: 'ナイジェリア', pop: 173600000, gdp: 573999 }, { country: 'スウェーデン', pop: 9471174, gdp: 570591 }, { country: 'ポーランド', pop: 38092000, gdp: 547894 }, { country: 'アルゼンチン', pop: 40117096, gdp: 543061 }, { country: 'ベルギー', pop: 10839905, gdp: 534230 }, { country: '台湾', pop: 23197947, gdp: 529597 }, { country: 'ノルウェー', pop: 5316800, gdp: 499817 }, { country: 'オーストリア', pop: 8419776, gdp: 437582 }, { country: 'イラン', pop: 80117000, gdp: 416490 }, { country: 'タイ', pop: 69519000, gdp: 404824 }, { country: 'アラブ首長国連邦', pop: 8264070, gdp: 399451 }, { country: 'コロンビア', pop: 48389000, gdp: 377867 }, { country: '南アフリカ', pop: 50586757, gdp: 350082 }, { country: 'デンマーク', pop: 5579204, gdp: 342362 }, { country: 'マレーシア', pop: 28334135, gdp: 338108 }, { country: 'シンガポール', pop: 5183700, gdp: 307872 }, { country: 'イスラエル', pop: 7798600, gdp: 305673 }, { country: '香港', pop: 7108100, gdp: 290896 }, { country: 'エジプト', pop: 88094000, gdp: 286435 }, { country: 'フィリピン', pop: 98390000, gdp: 284618 }, { country: 'フィンランド', pop: 5394389, gdp: 272649 }, { country: 'チリ', pop: 17248450, gdp: 258017 }, { country: 'アイルランド', pop: 4581269, gdp: 250814 }, { country: 'パキスタン', pop: 191282000, gdp: 246849 }, { country: 'ギリシャ', pop: 10787690, gdp: 237970 }, { country: 'ポルトガル', pop: 10555853, gdp: 229948 }, { country: 'イラク', pop: 32105000, gdp: 223508 }, { country: 'カザフスタン', pop: 16615000, gdp: 216036 }, { country: 'アルジェリア', pop: 36300000, gdp: 213518 }, { country: 'カタール', pop: 1699435, gdp: 210109 }, { country: 'ベネズエラ', pop: 31220000, gdp: 206252 }, { country: 'チェコ共和国', pop: 10542080, gdp: 205270 }, { country: 'ペルー', pop: 29797694, gdp: 202642 }, { country: 'ルーマニア', pop: 21436000, gdp: 199093 }, { country: 'ニュージーランド', pop: 4577100, gdp: 197502 }, { country: 'ベトナム', pop: 89700000, gdp: 185897 }, { country: 'バングラデシュ', pop: 156600000, gdp: 183824 }, { country: 'クウェート', pop: 2818000, gdp: 172608 }, { country: 'ハンガリー', pop: 9985722, gdp: 136989 }, { country: 'ウクライナ', pop: 45668028, gdp: 130660 }, { country: 'アンゴラ', pop: 19618000, gdp: 129326 }, { country: 'モロッコ', pop: 33803400, gdp: 110009 }, { country: 'エクアドル', pop: 14483499, gdp: 100543 }, { country: 'スロバキア', pop: 5437126, gdp: 99869 }, { country: 'オマーン', pop: 2773479, gdp: 77779 }, { country: 'シリア', pop: 23362000, gdp: 77460 }, { country: 'ベラルーシ', pop: 9468000, gdp: 76139 }, { country: 'スリランカ', pop: 20653000, gdp: 74924 }, { country: 'スーダン', pop: 30894000, gdp: 74766 }, { country: 'アゼルバイジャン', pop: 9111100, gdp: 74145 }, { country: 'ルクセンブルク', pop: 511840, gdp: 65683 }, { country: 'ドミニカ共和国', pop: 9378818, gdp: 64058 }, { country: 'ミャンマー', pop: 48337000, gdp: 63135 }, { country: 'ウズベキスタン', pop: 28000000, gdp: 62613 }, { country: 'ケニア', pop: 38610097, gdp: 60937 }, { country: 'グアテマラ', pop: 14713763, gdp: 58728 }, { country: 'ウルグアイ', pop: 3368595, gdp: 57471 }, { country: 'クロアチア', pop: 4290612, gdp: 57073 }, { country: 'ブルガリア', pop: 7364570, gdp: 55824 }, { country: 'エチオピア', pop: 94100000, gdp: 54809 }, { country: 'レバノン', pop: 4259000, gdp: 50028 }, { country: 'スロベニア', pop: 2081660, gdp: 49570 }, { country: 'コスタリカ', pop: 4563539, gdp: 49553 }, { country: 'チュニジア', pop: 10673800, gdp: 48633 }, { country: 'リトアニア', pop: 3207100, gdp: 48288 }, { country: 'タンザニア', pop: 43188000, gdp: 48089 }, { country: 'トルクメニスタン', pop: 5105000, gdp: 47932 }, { country: 'セルビア', pop: 7120666, gdp: 43866 }, { country: 'パナマ', pop: 3405813, gdp: 43777 }, { country: 'イエメン', pop: 23833000, gdp: 43229 }, { country: 'リビア', pop: 6423000, gdp: 41148 }, { country: 'ガーナ', pop: 24233431, gdp: 38616 }, { country: 'コンゴ民主共和国', pop: 67758000, gdp: 35918 }, { country: 'ヨルダン', pop: 6783300, gdp: 35878 }, { country: 'バーレーン', pop: 1234571, gdp: 33862 }, { country: 'コートジボワール', pop: 21395000, gdp: 33741 }, { country: 'ボリビア', pop: 10426154, gdp: 33237 }, { country: 'ラトビア', pop: 2209000, gdp: 31972 }, { country: 'カメルーン', pop: 19406100, gdp: 31777 }, { country: 'パラグアイ', pop: 6337127, gdp: 30220 }, { country: 'トリニダード・トバゴ', pop: 1317714, gdp: 28874 }, { country: 'ウガンダ', pop: 32939800, gdp: 27616 }, { country: 'ザンビア', pop: 13046508, gdp: 26611 }, { country: 'エストニア', pop: 1340194, gdp: 26506 }, { country: 'エルサルバドル', pop: 6227000, gdp: 25164 }, { country: 'キプロス', pop: 803200, gdp: 23263 }, { country: 'アフガニスタン', pop: 32358000, gdp: 20444 }, { country: 'ネパール', pop: 26620809, gdp: 19761 }, { country: 'ホンジュラス', pop: 8215313, gdp: 19511 }, { country: 'ガボン', pop: 1534000, gdp: 18209 }, { country: 'ボスニア・ヘルツェゴビナ', pop: 3843126, gdp: 18165 }, { country: 'ブルネイ', pop: 422700, gdp: 17104 }, { country: 'アイスランド', pop: 318452, gdp: 17036 }, { country: 'パプアニューギニア', pop: 7014000, gdp: 16809 }, { country: 'モザンビーク', pop: 23049621, gdp: 16684 }, { country: 'カンボジア', pop: 13395682, gdp: 16551 }, { country: 'ジョージア', pop: 4469200, gdp: 16536 }, { country: 'セネガル', pop: 12855153, gdp: 15683 }, { country: '赤道ギニア', pop: 720000, gdp: 15530 }, { country: 'ボツワナ', pop: 2031000, gdp: 15217 }, { country: '南スーダン', pop: 8260490, gdp: 14304 }, { country: 'チャド', pop: 10329208, gdp: 13945 }, { country: 'ジンバブエ', pop: 12754000, gdp: 13833 }, { country: 'ジャマイカ', pop: 2705800, gdp: 13709 }, { country: 'ナミビア', pop: 2324000, gdp: 13632 }, { country: 'コンゴ共和国', pop: 4140000, gdp: 13552 }, { country: 'アルバニア', pop: 3194972, gdp: 13276 }, { country: 'モーリシャス', pop: 1280924, gdp: 12588 }, { country: 'ブルキナファソ', pop: 15730977, gdp: 12503 }, { country: 'マリ', pop: 14517176, gdp: 12094 }, { country: 'モンゴル', pop: 2736800, gdp: 12037 }, { country: 'ニカラグア', pop: 5815524, gdp: 11806 }, { country: 'ラオス', pop: 6348800, gdp: 11681 }, { country: 'アルメニア', pop: 3266300, gdp: 11644 }, { country: 'マケドニア', pop: 2057284, gdp: 11342 }, { country: 'マダガスカル', pop: 18866000, gdp: 10674 }, { country: 'マルタ', pop: 417617, gdp: 10514 }, { country: 'タジキスタン', pop: 7616000, gdp: 9242 }, { country: 'ハイチ', pop: 10085214, gdp: 8711 }, { country: 'ベニン', pop: 9100000, gdp: 8685 }, { country: 'バハマ', pop: 353658, gdp: 8511 }, { country: 'ニジェール', pop: 15730754, gdp: 8024 }, { country: 'モルドバ', pop: 3560400, gdp: 7962 }, { country: 'ルワンダ', pop: 10412826, gdp: 7897 }, { country: 'キルギスタン', pop: 5477600, gdp: 7402 }, { country: 'コソボ', pop: 1870981, gdp: 7319 }, { country: 'ギニア', pop: 10217591, gdp: 6707 }, { country: 'マラウイ', pop: 13077160, gdp: 6055 }, { country: 'スリナム', pop: 529000, gdp: 5210 }, { country: 'モーリタニア', pop: 3340627, gdp: 5081 }, { country: '東ティモール', pop: 1066409, gdp: 4970 }, { country: 'シエラレオネ', pop: 5997000, gdp: 4815 }, { country: 'トーゴ', pop: 5753324, gdp: 4594 }, { country: 'モンテネグロ', pop: 620029, gdp: 4551 }, { country: 'スワジランド', pop: 1203000, gdp: 4416 }, { country: 'バルバドス', pop: 276302, gdp: 4354 }, { country: 'フィジー', pop: 868000, gdp: 4289 }, { country: 'エリトリア', pop: 5415000, gdp: 3858 }, { country: 'ブルンジ', pop: 8575000, gdp: 3094 }, { country: 'ガイアナ', pop: 784894, gdp: 3059 }, { country: 'モルディブ', pop: 317280, gdp: 2885 }, { country: 'レソト', pop: 2194000, gdp: 2220 }, { country: 'リベリア', pop: 3476608, gdp: 2013 }, { country: 'ブータン', pop: 708265, gdp: 1983 }, { country: 'カーボベルデ', pop: 491575, gdp: 1858 }, { country: 'サンマリノ', pop: 32093, gdp: 1786 }, { country: '中央アフリカ共和国', pop: 4487000, gdp: 1726 }, { country: 'ベリーズ', pop: 312698, gdp: 1699 }, { country: 'ジブチ', pop: 818159, gdp: 1589 }, { country: 'セイシェル', pop: 90945, gdp: 1423 }, { country: 'セントルシア', pop: 166526, gdp: 1404 }, { country: 'アンティグアバーブーダ', pop: 89138, gdp: 1248 }, { country: 'ソロモン諸島', pop: 542287, gdp: 1155 }, { country: 'ギニアビサウ', pop: 1520830, gdp: 1111 }, { country: 'グレナダ', pop: 110821, gdp: 912 }, { country: 'セントクリストファーネイビス', pop: 51970, gdp: 852 }, { country: 'サモア', pop: 184032, gdp: 827 }, { country: 'ガンビア', pop: 1776000, gdp: 824 }, { country: 'バヌアツ', pop: 234023, gdp: 822 }, { country: 'セントビンセント・グレナディーン諸島', pop: 100892, gdp: 729 }, { country: 'コモロ', pop: 754000, gdp: 697 }, { country: 'ドミニカ', pop: 71685, gdp: 524 }, { country: 'トンガ', pop: 105000, gdp: 438 }, { country: 'サントメプリンシペ', pop: 169000, gdp: 338 }, { country: 'ミクロネシア', pop: 102624, gdp: 308 }, { country: 'パラオ', pop: 21000, gdp: 249 }, { country: 'マーシャル諸島', pop: 54305, gdp: 193 }, { country: 'キリバス', pop: 101000, gdp: 181 }, { country: 'ツバル', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point arr.forEach(country => country["pci"] = country.gdp / country.pop * 1e6); // US$/year/capita // return arr; } <template> <div class="container-fluid"> <div class="form-group"> <label for="logScale">対数軸</label> <input id="logScale" type="checkbox" checked="checked" v-on:change="changeLogBase"> <wj-flex-chart :itemsSource="data" chartType="Bubble" bindingX="pop" tooltipContent="&lt;b&gt;{country}&lt;/b&gt;:&lt;br/&gt;{pci:n0} ドル(年間1人あたり)"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series name="GDP" binding="gdp,pci"></wj-flex-chart-series> <wj-flex-chart-axis wjProperty="axisX" title="人口(100万人)" :axisLine="true" format="g4,," :logBase="logBase"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" title="GDP(10億ドル)" format="g4," :logBase="logBase"></wj-flex-chart-axis> </wj-flex-chart> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), logBase: 10 } }, methods: { changeLogBase: function(chk) { this.logBase = chk.target.checked ? 10 : null } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } .wj-flexchart g.wj-series-group ellipse { fill: gold; stroke: orange; opacity: .5 } .wj-flexchart g.wj-series-group ellipse:hover { fill: orange; opacity: 1; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Logarithmic Axis</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 getData() { let arr = [ { country: 'アメリカ', pop: 320723000, gdp: 17348075 }, { country: '中国', pop: 1357000000, gdp: 10356508 }, { country: '日本', pop: 127300000, gdp: 4602367 }, { country: 'ドイツ', pop: 80620000, gdp: 3874437 }, { country: 'イギリス', pop: 64596800, gdp: 2950039 }, { country: 'フランス', pop: 65821885, gdp: 2833687 }, { country: 'ブラジル', pop: 200400000, gdp: 2346583 }, { country: 'イタリア', pop: 60705991, gdp: 2147744 }, { country: 'インド', pop: 1252000000, gdp: 2051228 }, { country: 'ロシア', pop: 143500000, gdp: 1860598 }, { country: 'カナダ', pop: 34482779, gdp: 1785387 }, { country: 'オーストラリア', pop: 24170869, gdp: 1442722 }, { country: '韓国', pop: 48219000, gdp: 1410383 }, { country: 'スペイン', pop: 46162024, gdp: 1406538 }, { country: 'メキシコ', pop: 122300000, gdp: 1291062 }, { country: 'インドネシア', pop: 249900000, gdp: 888648 }, { country: 'オランダ', pop: 16715489, gdp: 880716 }, { country: 'トルコ', pop: 76667864, gdp: 798332 }, { country: 'サウジアラビア', pop: 27136977, gdp: 746248 }, { country: 'スイス', pop: 8039060, gdp: 703852 }, { country: 'ナイジェリア', pop: 173600000, gdp: 573999 }, { country: 'スウェーデン', pop: 9471174, gdp: 570591 }, { country: 'ポーランド', pop: 38092000, gdp: 547894 }, { country: 'アルゼンチン', pop: 40117096, gdp: 543061 }, { country: 'ベルギー', pop: 10839905, gdp: 534230 }, { country: '台湾', pop: 23197947, gdp: 529597 }, { country: 'ノルウェー', pop: 5316800, gdp: 499817 }, { country: 'オーストリア', pop: 8419776, gdp: 437582 }, { country: 'イラン', pop: 80117000, gdp: 416490 }, { country: 'タイ', pop: 69519000, gdp: 404824 }, { country: 'アラブ首長国連邦', pop: 8264070, gdp: 399451 }, { country: 'コロンビア', pop: 48389000, gdp: 377867 }, { country: '南アフリカ', pop: 50586757, gdp: 350082 }, { country: 'デンマーク', pop: 5579204, gdp: 342362 }, { country: 'マレーシア', pop: 28334135, gdp: 338108 }, { country: 'シンガポール', pop: 5183700, gdp: 307872 }, { country: 'イスラエル', pop: 7798600, gdp: 305673 }, { country: '香港', pop: 7108100, gdp: 290896 }, { country: 'エジプト', pop: 88094000, gdp: 286435 }, { country: 'フィリピン', pop: 98390000, gdp: 284618 }, { country: 'フィンランド', pop: 5394389, gdp: 272649 }, { country: 'チリ', pop: 17248450, gdp: 258017 }, { country: 'アイルランド', pop: 4581269, gdp: 250814 }, { country: 'パキスタン', pop: 191282000, gdp: 246849 }, { country: 'ギリシャ', pop: 10787690, gdp: 237970 }, { country: 'ポルトガル', pop: 10555853, gdp: 229948 }, { country: 'イラク', pop: 32105000, gdp: 223508 }, { country: 'カザフスタン', pop: 16615000, gdp: 216036 }, { country: 'アルジェリア', pop: 36300000, gdp: 213518 }, { country: 'カタール', pop: 1699435, gdp: 210109 }, { country: 'ベネズエラ', pop: 31220000, gdp: 206252 }, { country: 'チェコ共和国', pop: 10542080, gdp: 205270 }, { country: 'ペルー', pop: 29797694, gdp: 202642 }, { country: 'ルーマニア', pop: 21436000, gdp: 199093 }, { country: 'ニュージーランド', pop: 4577100, gdp: 197502 }, { country: 'ベトナム', pop: 89700000, gdp: 185897 }, { country: 'バングラデシュ', pop: 156600000, gdp: 183824 }, { country: 'クウェート', pop: 2818000, gdp: 172608 }, { country: 'ハンガリー', pop: 9985722, gdp: 136989 }, { country: 'ウクライナ', pop: 45668028, gdp: 130660 }, { country: 'アンゴラ', pop: 19618000, gdp: 129326 }, { country: 'モロッコ', pop: 33803400, gdp: 110009 }, { country: 'エクアドル', pop: 14483499, gdp: 100543 }, { country: 'スロバキア', pop: 5437126, gdp: 99869 }, { country: 'オマーン', pop: 2773479, gdp: 77779 }, { country: 'シリア', pop: 23362000, gdp: 77460 }, { country: 'ベラルーシ', pop: 9468000, gdp: 76139 }, { country: 'スリランカ', pop: 20653000, gdp: 74924 }, { country: 'スーダン', pop: 30894000, gdp: 74766 }, { country: 'アゼルバイジャン', pop: 9111100, gdp: 74145 }, { country: 'ルクセンブルク', pop: 511840, gdp: 65683 }, { country: 'ドミニカ共和国', pop: 9378818, gdp: 64058 }, { country: 'ミャンマー', pop: 48337000, gdp: 63135 }, { country: 'ウズベキスタン', pop: 28000000, gdp: 62613 }, { country: 'ケニア', pop: 38610097, gdp: 60937 }, { country: 'グアテマラ', pop: 14713763, gdp: 58728 }, { country: 'ウルグアイ', pop: 3368595, gdp: 57471 }, { country: 'クロアチア', pop: 4290612, gdp: 57073 }, { country: 'ブルガリア', pop: 7364570, gdp: 55824 }, { country: 'エチオピア', pop: 94100000, gdp: 54809 }, { country: 'レバノン', pop: 4259000, gdp: 50028 }, { country: 'スロベニア', pop: 2081660, gdp: 49570 }, { country: 'コスタリカ', pop: 4563539, gdp: 49553 }, { country: 'チュニジア', pop: 10673800, gdp: 48633 }, { country: 'リトアニア', pop: 3207100, gdp: 48288 }, { country: 'タンザニア', pop: 43188000, gdp: 48089 }, { country: 'トルクメニスタン', pop: 5105000, gdp: 47932 }, { country: 'セルビア', pop: 7120666, gdp: 43866 }, { country: 'パナマ', pop: 3405813, gdp: 43777 }, { country: 'イエメン', pop: 23833000, gdp: 43229 }, { country: 'リビア', pop: 6423000, gdp: 41148 }, { country: 'ガーナ', pop: 24233431, gdp: 38616 }, { country: 'コンゴ民主共和国', pop: 67758000, gdp: 35918 }, { country: 'ヨルダン', pop: 6783300, gdp: 35878 }, { country: 'バーレーン', pop: 1234571, gdp: 33862 }, { country: 'コートジボワール', pop: 21395000, gdp: 33741 }, { country: 'ボリビア', pop: 10426154, gdp: 33237 }, { country: 'ラトビア', pop: 2209000, gdp: 31972 }, { country: 'カメルーン', pop: 19406100, gdp: 31777 }, { country: 'パラグアイ', pop: 6337127, gdp: 30220 }, { country: 'トリニダード・トバゴ', pop: 1317714, gdp: 28874 }, { country: 'ウガンダ', pop: 32939800, gdp: 27616 }, { country: 'ザンビア', pop: 13046508, gdp: 26611 }, { country: 'エストニア', pop: 1340194, gdp: 26506 }, { country: 'エルサルバドル', pop: 6227000, gdp: 25164 }, { country: 'キプロス', pop: 803200, gdp: 23263 }, { country: 'アフガニスタン', pop: 32358000, gdp: 20444 }, { country: 'ネパール', pop: 26620809, gdp: 19761 }, { country: 'ホンジュラス', pop: 8215313, gdp: 19511 }, { country: 'ガボン', pop: 1534000, gdp: 18209 }, { country: 'ボスニア・ヘルツェゴビナ', pop: 3843126, gdp: 18165 }, { country: 'ブルネイ', pop: 422700, gdp: 17104 }, { country: 'アイスランド', pop: 318452, gdp: 17036 }, { country: 'パプアニューギニア', pop: 7014000, gdp: 16809 }, { country: 'モザンビーク', pop: 23049621, gdp: 16684 }, { country: 'カンボジア', pop: 13395682, gdp: 16551 }, { country: 'ジョージア', pop: 4469200, gdp: 16536 }, { country: 'セネガル', pop: 12855153, gdp: 15683 }, { country: '赤道ギニア', pop: 720000, gdp: 15530 }, { country: 'ボツワナ', pop: 2031000, gdp: 15217 }, { country: '南スーダン', pop: 8260490, gdp: 14304 }, { country: 'チャド', pop: 10329208, gdp: 13945 }, { country: 'ジンバブエ', pop: 12754000, gdp: 13833 }, { country: 'ジャマイカ', pop: 2705800, gdp: 13709 }, { country: 'ナミビア', pop: 2324000, gdp: 13632 }, { country: 'コンゴ共和国', pop: 4140000, gdp: 13552 }, { country: 'アルバニア', pop: 3194972, gdp: 13276 }, { country: 'モーリシャス', pop: 1280924, gdp: 12588 }, { country: 'ブルキナファソ', pop: 15730977, gdp: 12503 }, { country: 'マリ', pop: 14517176, gdp: 12094 }, { country: 'モンゴル', pop: 2736800, gdp: 12037 }, { country: 'ニカラグア', pop: 5815524, gdp: 11806 }, { country: 'ラオス', pop: 6348800, gdp: 11681 }, { country: 'アルメニア', pop: 3266300, gdp: 11644 }, { country: 'マケドニア', pop: 2057284, gdp: 11342 }, { country: 'マダガスカル', pop: 18866000, gdp: 10674 }, { country: 'マルタ', pop: 417617, gdp: 10514 }, { country: 'タジキスタン', pop: 7616000, gdp: 9242 }, { country: 'ハイチ', pop: 10085214, gdp: 8711 }, { country: 'ベニン', pop: 9100000, gdp: 8685 }, { country: 'バハマ', pop: 353658, gdp: 8511 }, { country: 'ニジェール', pop: 15730754, gdp: 8024 }, { country: 'モルドバ', pop: 3560400, gdp: 7962 }, { country: 'ルワンダ', pop: 10412826, gdp: 7897 }, { country: 'キルギスタン', pop: 5477600, gdp: 7402 }, { country: 'コソボ', pop: 1870981, gdp: 7319 }, { country: 'ギニア', pop: 10217591, gdp: 6707 }, { country: 'マラウイ', pop: 13077160, gdp: 6055 }, { country: 'スリナム', pop: 529000, gdp: 5210 }, { country: 'モーリタニア', pop: 3340627, gdp: 5081 }, { country: '東ティモール', pop: 1066409, gdp: 4970 }, { country: 'シエラレオネ', pop: 5997000, gdp: 4815 }, { country: 'トーゴ', pop: 5753324, gdp: 4594 }, { country: 'モンテネグロ', pop: 620029, gdp: 4551 }, { country: 'スワジランド', pop: 1203000, gdp: 4416 }, { country: 'バルバドス', pop: 276302, gdp: 4354 }, { country: 'フィジー', pop: 868000, gdp: 4289 }, { country: 'エリトリア', pop: 5415000, gdp: 3858 }, { country: 'ブルンジ', pop: 8575000, gdp: 3094 }, { country: 'ガイアナ', pop: 784894, gdp: 3059 }, { country: 'モルディブ', pop: 317280, gdp: 2885 }, { country: 'レソト', pop: 2194000, gdp: 2220 }, { country: 'リベリア', pop: 3476608, gdp: 2013 }, { country: 'ブータン', pop: 708265, gdp: 1983 }, { country: 'カーボベルデ', pop: 491575, gdp: 1858 }, { country: 'サンマリノ', pop: 32093, gdp: 1786 }, { country: '中央アフリカ共和国', pop: 4487000, gdp: 1726 }, { country: 'ベリーズ', pop: 312698, gdp: 1699 }, { country: 'ジブチ', pop: 818159, gdp: 1589 }, { country: 'セイシェル', pop: 90945, gdp: 1423 }, { country: 'セントルシア', pop: 166526, gdp: 1404 }, { country: 'アンティグアバーブーダ', pop: 89138, gdp: 1248 }, { country: 'ソロモン諸島', pop: 542287, gdp: 1155 }, { country: 'ギニアビサウ', pop: 1520830, gdp: 1111 }, { country: 'グレナダ', pop: 110821, gdp: 912 }, { country: 'セントクリストファーネイビス', pop: 51970, gdp: 852 }, { country: 'サモア', pop: 184032, gdp: 827 }, { country: 'ガンビア', pop: 1776000, gdp: 824 }, { country: 'バヌアツ', pop: 234023, gdp: 822 }, { country: 'セントビンセント・グレナディーン諸島', pop: 100892, gdp: 729 }, { country: 'コモロ', pop: 754000, gdp: 697 }, { country: 'ドミニカ', pop: 71685, gdp: 524 }, { country: 'トンガ', pop: 105000, gdp: 438 }, { country: 'サントメプリンシペ', pop: 169000, gdp: 338 }, { country: 'ミクロネシア', pop: 102624, gdp: 308 }, { country: 'パラオ', pop: 21000, gdp: 249 }, { country: 'マーシャル諸島', pop: 54305, gdp: 193 }, { country: 'キリバス', pop: 101000, gdp: 181 }, { country: 'ツバル', pop: 10000, gdp: 38 } ]; // // calculate the per-capita income and add that to each data point arr.forEach(country => country.pci = country.gdp / country.pop * 1e6); // US$/year/capita // return arr; }