デモ
ヘルプ
APIリファレンス
その他のサンプル
トライアル版
デモ
デモ
チャート
チャートの機能
凡例とタイトル
基本機能
グローバリゼーション
日時と数字の書式設定
日時と数字の解析
カスタマイズ
テンプレート文字列
文字列の書式設定
基数詞
CollectionView
概要
データの読み込み
クライアント上で読み込み
サーバーから読み込み
JSON日付の読み込み
読み込み中表示
ビューの作成
現在の項目
ソート
概要
ソート順序
安定したソート
フィルター
概要
複数のフィルター
フィルターの連結
グループ化
概要
カスタムグループ化
ページング
編集
編集
項目の追加と削除
変更の追跡
検証
ナビゲーション
ナビゲーター
印刷
クリップボード
ツールチップ
色
グリフ
HTTPリクエスト
アニメーション
ポップアップ
元に戻す／やり直し
グリッド
概要
データ連結
CollectionView
OData
仮想OData
無限スクロール
非連結
列
列の幅
データマップ
列ピッカー
並べ替え
サイズ変更
ソート
固定
ピンで固定
列グループ
スティッキーヘッダー
種類
行
追加と削除
行の高さ
固定
種類
詳細行
カスタムセル
セルテンプレート
セルテンプレート
一般的な使用方法
条件付き書式
メモ
自動更新
スパークライン
カスタムエディタ
ページング／スクロール
クライアント側のページング
サーバー側のページング
仮想スクロール
スクロールバーの非表示
高速スクロール
スクロールとビュー範囲
ソート
概要
オンデマンドソート
複数列のソート
編集
概要
クイック編集
編集禁止
検証
CollectionViewの検証
編集イベント
常時編集
インライン編集
ポップアップエディタ
カスタムエディタ
IMEの有効化
選択
概要
複数範囲の選択
チェックボックス
検索
マーキー
フォーカス
グループ化
概要
グループパネル
集計
概要
データの上の集計
データの下に集計
カスタム集計
セル結合
概要
ヘッダーセルの結合
カスタムセル結合
制限付きのセル結合
フィルター／検索
概要
Excelスタイルのフィルター
概要
フィルターの種類
フィルターアイコン
フィルター演算子
フィルターの最適化
検索
サーバー側のフィルター
階層データのフィルター
オンデマンドフィルター
ツリーグリッド
概要
編集可能
非連結
遅延読み込み
XMLに連結
マスター詳細
概要
詳細行
複数行グリッド
レイアウト定義
折りたたみ可能な列ヘッダー
列ヘッダーのカスタマイズ
スタイル
グループ化
集計
フィルター
行と列の固定
ページング
レコードの追加と削除
振替伝票
受注伝票
受注明細照会
仕入伝票
受注管理
売上伝票
スプレッドシート
非連結
データ連結
ソート
フィルター
セル書式
複数のヘッダー
セル結合
ドラッグ＆ドロップ
固定セル
数式
カスタム関数
テーブル
Excel入出力
転置グリッド
転置グリッド
入出力
Excel
Excel入出力
PDF
ファイルにエクスポート
PdfDocumentにエクスポート
カスタムフォント
諸経費レポート
諸経費分析レポート
カスタムセルコンテンツ
セル描画のカスタマイズ
セルの手動描画
無効なセルの強調表示
Web Workers
印刷
イベント
マウスイベント
キーボードイベント
選択イベント
編集イベント
列のサイズ変更イベント
列の並べ替えイベント
ドラッグ＆ドロップイベント
アクセシビリティ
クリップボード
サイズ
概要
マウスでサイズ変更
行の高さの自動調整
行の高さの自動調整（非同期）
列の幅の自動調整
遅延サイズ変更
スタイル
行
概要
行の高さ
行の高さを維持
列
セル
オーバーフロー表示
はみ出し表示
垂直方向の配置
ホバースタイル
レスポンシブレイアウト
アニメーション
状態の維持
チャート
概要
売上ダッシュボード
棒チャート
棒チャート
積み上げチャート
負の値
データラベル
範囲棒チャート
複数のチャート
軸の範囲
エラーバー
ドリルダウン
折れ線／面チャート
折れ線チャート
面チャート
マーカー付き積み上げ折れ線
100％積み上げ面
マーカー付きスプライン
注釈
欠落データ
範囲選択
日付データの集計
自動更新
対数軸
カスタム描画
カスタム関数
範囲面チャート
ステップチャート
散布図／バブルチャート
散布図
条件付き書式
近似曲線
バブルチャート
区域
軸の原点と位置
複数選択
アニメーション
円／サンバーストチャート
円チャート
ドーナツチャート
アニメーション
選択
グラデーション
サンバースト
周期的なサンバースト
複数の円チャート
ツリーマップ
グループ化ツリーマップ
ツリーマップの深さ
水平／垂直ツリーマップ
レーダー／ポーラーチャート
レーダーチャート
レーダー面チャート
ポーラーチャート
株価チャート
ローソク足チャート
バーチャート
平均足チャート
新値足チャート
練行足チャート
カギ足チャート
ボリュームチャート
テクニカル指標
オーバーレイ
注釈
フィボナッチツール
特殊なチャート
箱ひげ図
エラーバー
じょうごチャート
長方形のじょうごチャート
ガントチャート
ガントチャート
定期的なタスク
パレート図
ウォーターフォール
チャートの機能
アラームゾーン
アニメーション
注釈
軸の原点と位置
条件付き書式
データラベル
編集可能な注釈
フィルターとズーム
カスタム軸ラベル
カスタム系列
カスタムツールチップ
エクスポート
グラデーション
グリッド線と目盛り
ヒットテスト
凡例とタイトル
系列の表示切り替え
ラインマーカー
対数軸
移動平均線
複数の軸
複数のプロットエリア
パレット
選択
系列ピッカー
軸のスクロールバー
ソート
積み上げプロットエリア
系列のスタイル
近似曲線
ズームとパン
ゲージ
概要
基本的なプロパティ
ブレットグラフ
線形ゲージ
円形ゲージ
範囲
積み上げ範囲
スタイル
概要
ホバースタイル
フォーカススタイル
範囲のスタイル
ゲージ要素
概要
フェイス
ポインタ
針ポインタ
範囲
サム
目盛り
目盛りのテキスト
テキスト
入力
オートコンプリート
概要
非同期読み込み
検索
スタイル
検索対象のメンバ
検索条件
カスタム検索
項目の自動追加
フィルター
カレンダー
概要
範囲
スタイル
カスタム表示
検証
色ピッカー
概要
コンボボックス
概要
文字列
数値と日付
オブジェクト
概要
マスター詳細
ソートとフィルター
連鎖
グループ化
概要
カスタムグループ化
分類グループ
複数列
HTMLコンテンツ
項目の自動追加
無限スクロール
ドロップダウン
概要
色入力
概要
日付入力
概要
書式
範囲
カスタム表示
検証
日付時刻入力
概要
マスク入力
概要
生の値
プロンプト文字
全て入力
数値入力
概要
書式
スピナーボタン
範囲
時刻入力
概要
リストボックス
概要
カスタム項目
チェックボックス
無限スクロール
メニュー
概要
コマンド
値の選択
スプリットボタン
コンテキストメニュー
階層メニュー
動的メニュー
タグ入力
概要
複数選択
概要
チェック状態
カスタム項目
ポップアップ
ダイアログ
アラートとプロンプト
トランジション
ポップアップエディタ
ポップアップダイアログ
移動
リサイズ
ポップアップ
ナビゲーション
タブパネル
概要
マークアップで作成
Wijmoコントロールのホスト
プログラムで作成
リボン
スタイル
無効と非表示
分離パネル
アクセシビリティ
右から左へ表示
ツリービュー
パフォーマンス
動作
コンテキストメニュー
ナビゲーションツリー
検索
スタイル
概要
罫線
アコーディオン
アコーディオンパネル
ノード
概要
画像
チェックボックス
カスタムノード
ノードの表示と選択
ノードの編集
ノードの無効化
ノードの追加
ノードの削除
ノードの更新
ドラッグ＆ドロップ
他のツリーへドラッグ
データ連結
初期状態
複数形式のデータ
遅延読み込み
ODataの遅延読み込み
遅延再読み込み
OLAP
ピボットエンジン
概要
パフォーマンス
ビューの保存
サーバー側データ
SSASキューブ
ComponentOneデータサービス
ピボットパネル
概要
フィールドのドラッグ＆ドロップ
フィールド
種類
値フィールド
行列フィールド
フィルターフィールド
カスタマイズ
フィールド設定ダイアログ
概要
ソート
集計方法
計算の種類
表示形式
計算フィールド
階層フィールド
カスタムレイアウト
概要
積み上げレイアウト
隣り合わせのレイアウト
2列のレイアウト
フィールドのみ
領域セクションのみ
ピボットグリッド
概要
ソート
折りたたみと展開
詳細ダイアログ
アウトラインモード
合計
小計
カスタムセル
HTMLコンテンツ
スパークライン
エクスポート
Excel／PDFエクスポート
ピボットチャート
概要
チャート種別
タイトル
凡例
エクスポート
スライサー
PDF
概要
ページ構造
グラフィック
テキスト
フォント
カスタムフォント
リッチテキスト
画像
ヘッダーとフッター
テーブル
レポート
円チャート（ラスター画像）
円チャート（SVG画像）
ビューワー
PDFビューワー
概要
レポートビューワー
概要
FlexReportレポート
SSRSレポート
ActiveReportsレポート
Excel
レポート
ファイルの表示
チャート：凡例とタイトル
テーマ:
Default
Cerulean
Clean Dark
Clean Light
Cocoa
Coral
Cyborg
Dark
Flatly
Grayscale
High Contrast
Light
Material
Midnight
Minimal
Modern
Office
Organic
Paper
Simplex
Slate
Superhero
Trust
Zen
header
、
footer
、および軸の
title
のプロパティを使用して、チャートにタイトルを追加します。
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjInput from '@grapecity/wijmo.input'; import { getData, getComboData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), bindingX: 'country', legend: { position: 'Right' }, series: [ { binding: 'sales', name: '売上' }, { binding: 'expenses', name: '費用' }, { binding: 'downloads', name: 'DL数' } ] }); theChart.palette = getRandomPalette(); // toggle custom styles document.getElementById('customTitles').addEventListener('click', function (e) { wjCore.toggleClass(theChart.hostElement, 'custom-titles', e.target.checked); }); // toggle custom legend styles document.getElementById('customLegend').addEventListener('click', function (e) { wjCore.toggleClass(theChart.hostElement, 'custom-legend', e.target.checked); }); // change legend position var legendPosition = new wjInput.ComboBox('#legendPosition', { itemsSource: getComboData(), textChanged: function (s, e) { theChart.legend.position = s.selectedIndex; }, text: '左' }); // // customize chart titles let header = new wjInput.ComboBox('#header', { textChanged: (s) => theChart.header = s.text }); let footer = new wjInput.ComboBox('#footer', { textChanged: (s) => theChart.footer = s.text }); let xTitle = new wjInput.ComboBox('#xTitle', { textChanged: (s) => theChart.axisX.title = s.text }); let yTitle = new wjInput.ComboBox('#yTitle', { textChanged: (s) => theChart.axisY.title = s.text }); // // initialize titles header.text = '各国の実績'; footer.text = 'powered by Wijmo'; xTitle.text = '国'; yTitle.text = '金額／数'; } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Legends and Titles</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="header">ヘッダー: </label> <div id="header"></div><br> <label for="footer">フッター: </label> <div id="footer"></div><br> <label for="xTitle">X軸タイトル: </label> <div id="xTitle"></div><br> <label for="yTitle">Y軸タイトル: </label> <div id="yTitle"></div> <div> <label for="customTitles">カスタムタイトル: </label> <input id="customTitles" type="checkbox" checked="true"> </div> <div> <label for="customLegend">カスタム凡例: </label> <input id="customLegend" type="checkbox" checked="true"> </div> <label for="legendPosition">凡例の位置: </label> <div id="legendPosition"></div> <div class="custom-titles custom-legend" id="theChart"></div> </div> </body> </html>
// create some random data export function getData() { let countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; } // export function getComboData() { return 'なし,左,上,右,下'.split(','); }
.wj-flexchart { height: 300px; } label { width: 150px; text-align: right; } .wj-control { margin-bottom: 3px; } /* custom color for all titles */ .custom-titles.wj-flexchart .wj-title { fill: #42357C; } /* custom size/weight for header */ .custom-titles.wj-flexchart .wj-header .wj-title { font-size: 120%; font-weight: bold; } /* custom size/weight for footer */ .custom-titles.wj-flexchart .wj-footer .wj-title { font-size: 90%; font-weight: bold; } /* custom style for axis-x/y titles */ .custom-titles.wj-flexchart .wj-axis-x .wj-title, .custom-titles.wj-flexchart .wj-axis-y .wj-title{ font-size: 75%; font-style: normal; opacity: .5; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } /* custom color for legend box */ .custom-legend.wj-flexchart .wj-legend > rect { fill: #003000; } /* custom color for legend labels */ .custom-legend.wj-flexchart .wj-legend .wj-label { fill: white; font-style: italic; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);
