Wijmo UI for the Web
wijbarchart jQuery ウィジェット
| Javascript (Usage) | |
|---|---|
$(function () { var options; //タイプ： wijmo.chart.wijbarchart.options $(".selector").wijbarchart(options); }); | |
| Javascript (Specification) | |
|---|---|
| |
| 名前 | 解説 | |
|---|---|---|
 | animation | animation オプションは、アニメーションが表示されるかどうかと、その方法を決定します。このオプションはアニメーション効果を定義し、ウィジェットのアニメーションの他の特性（持続時間やイージングなど）を制御します。 アニメーション効果を無効にするには、enabled 属性を false に設定します。サポートされているアニメーション効果とイージングの詳細については、「アニメーション」を参照してください。 型: object デフォルト値: {enabled: true, duration: 400, easing: "easeinCubic"} |
| annotations | デフォルト値：[] チャートに表示する注釈の設定を含むAnnotationBaseオブジェクトの配列を作成します。 |
| autoResize | チャート要素のサイズを変更したときにチャートを再描画するかどうかを示す値。 型: Boolean デフォルト値: true |
| axis | チャートの X 軸と Y 軸を作成するためのすべての情報を含むオブジェクト。 型: wijmo.chart.chart_axes オブジェクト デフォルト値: x:{ alignment: "center", style: {stroke: "#999999", "stroke-width": 0.5}, visible: true, textVisible: true, text: "", textStyle: {fill: "#888", "font-size": 15, "font-weight": "bold"}, labels: { style: {fill: "#333", "font-size": 11}, textAlign: "near", width: null }, compass: "south", autoMin: true, autoMax: true, min: null, max: null, origin: null, autoMajor: true, autoMinor: true, unitMajor: null, unitMinor: null, gridMajor: { visible: false, style: {stroke: "#CACACA", "stroke-dasharray": "- "} }, gridMinor: { visible: false, style: {stroke: "#CACACA", "stroke-dasharray": "- "} }, tickMajor: { position: "none", style: {fill: "black"}, factor: 1 }, tickMinor: { position: "none", style: {fill: "black"}, factor:1 }, annoMethod: "values", valueLabels:[] }, y:{ alignment: "center", style: {stroke: "#999999", "stroke-width": 0.5}, visible: false, textVisible: true, textStyle: {fill: "#888", "font-size": 15, "font-weight": "bold"}, labels: { style: {fill: "#333", "font-size": 11}, textAlign: "center", width: null }, compass: "west", autoMin: true, autoMax: true, autoMajor: true, autoMinor: true, gridMajor: { visible: true, style: { stroke: "#999999", "stroke-width": "0.5", " stroke-dasharray": "none" } }, gridMinor: { visible: false, style: {stroke: "#CACACA", "stroke-dasharray": "- "} }, tickMajor: { position: "none", style: {fill: "black"}, factor: 1 }, tickMinor: { position: "none", style: {fill: "black"}, factor:1 }, annoMethod: "values", valueLabels:[] } |
| chartLabelFormatString | 各チャート要素の値を示すチャートラベルの数値書式を設定します。標準の数値書式指定文字列を使用できます。 型: String デフォルト値: "" |
| chartLabelFormatter | デフォルト値: null 各チャート要素のチャートラベルの内容部分の取得に使用される関数を示す値。 |
| chartLabelStyle | 各チャート要素の値を示すチャートラベルのすべてのスタイルオプションを設定します。 型: Object デフォルト値: {} |
| clusterOverlap | 各バーを同じクラスター内の次のバーに重ねてレンダリングする量をバー幅の割合（%）で設定します。 型: Number デフォルト値:0 有効な値: -100 〜 100 |
| clusterRadius | チャートのバーの角の丸みを決定するピクセル数を設定します。 型: Number デフォルト値: 0 |
| clusterSpacing | 各クラスター内のバーの間隔（ピクセル単位）を設定します。 型: Number デフォルト値: 0 |
| clusterWidth | 各クラスター内のバーが占める、各クラスターに割り当てられたプロット領域に対する割合（%）を設定します。 型: Number デフォルト値: 85 |
| culture | チャートテキスト、日付、および数値の書式設定に使用するカルチャ ID 名を示す値。 型: String デフォルト値: "" |
| cultureCalendar | 複数のカレンダーを持つカルチャでチャートの日付の書式設定にどのカレンダーを使用するかを示す値。このオプションは、指定した culture に指定したカレンダーが含まれている場合にのみ有効です。 型: String デフォルト値: "" |
| data | 各系列のデータ x 配列にフィールドをバインドする wijmo.data オブジェクト。 型: Object デフォルト値: null |
| dataSource | datasource オプションは v3.20131.1 から非推奨になりました。 代わりに、いくつかのタイプの DataView をサポートする更新された data オプションを使用してください。 |
| disabled | コントロールを無効にするかどうかを取得または設定します。 |
| disableDefaultTextStyle | オプションの代わりにクラスを使用してテキストのフォントファミリーを設定できるかどうかを示す値を設定します。true に設定されている場合、textStyle オプションはフォールバック スタイルに使用されません。 型: Boolean デフォルト値: false |
| footer | 棒グラフのフッタとして使用するオブジェクトを設定します。 型: wijmo.chart.chart_title オブジェクト デフォルト値: { compass:"south", orientation:"horizontal", style: {fill: "#fff", stroke: "none"}, text: "", textStyle: {fill: "#000", stroke: "none"}, visible: false } |
| header | 棒グラフのヘッダとして使用するオブジェクトを設定します。 型: wijmo.chart.chart_title オブジェクト デフォルト値: { compass:"south", orientation:"horizontal", style: {fill: "#fff", stroke: "none"}, text: "", textStyle: {fill: "#000", stroke: "none"}, visible: false } |
| height | チャートの高さ（ピクセル単位）を設定します。 型: Number デフォルト値: null |
| hint | マウスをチャート要素に合わせたときに表示されるツールチップ（ヒント）として使用するオブジェクトを作成します。 デフォルト値: { animated: "fade", calloutFilled: false, calloutFilledStyle: {fill: "#000"}, compass: "north", content: null, contentStyle: {fill: "#d1d1d1", "font-size": 16}, duration: 120, easing: "easeOutExpo", enable: true, hideAnimated: "fade", hideDelay: 150, hideDuration: 120, hideEasing: "easeOutExpo", offsetX: 0, offsetY: 0, showAnimated: "fade", showCallout: true, showDelay: 150, showDuration: 120, showEasing: "easeOutExpo", style: {fill: "270-#333333-#000000", "stroke-width": "2"}, title: null, titleStyle: {fill: "#d1d1d1", "font-size": 16}, } |
| horizontal | 棒グラフを水平と垂直のどちらの向きにレンダリングするかを決定する値。false に設定すると、縦の棒グラフになります。 型: Boolean デフォルト値: true |
| indicator | ユーザーがチャート要素をクリックしたときに各チャート要素の中心から水平/垂直に伸びるインジケーター線を表示できるオブジェクトを設定します。 デフォルト値: {visible: false, style: {stroke: "#000000"}} |
| is100Percent | 積層型のバーを合計値 100% として表すかどうかを決定する値を設定します。これにより、それぞれの値が合計にどの程度寄与しているかがわかります。 型: Boolean デフォルト値: false |
| legend | チャートとともに表示する凡例オブジェクトを作成します。 型: wijmo.chart.chart_legend オブジェクト デフォルト値: { compass: "east", orientation: "vertical", style: {fill: "#none", stroke: "none"}, text: "", textMargin: {left: 2, top: 2, right: 2, bottom: 2 }, textStyle: {fill: "#333", stroke: "none"}, titleStyle: {"font-weight": "bold", fill: "#000", stroke: "none"}, visible: true } |
| marginBottom | チャート領域と、ウィジェットを定義する <div> の下端との間隔（ピクセル単位）を設定します。
型: Number デフォルト値: 25 |
| marginLeft | チャート領域と、ウィジェットを定義する <div> の左端との間隔（ピクセル単位）を設定します。 型: Number デフォルト値: 25 |
| marginRight | チャート領域と、ウィジェットを定義する <div> の右端との間隔（ピクセル単位）を設定します。 型: Number デフォルト値: 25 |
| marginTop | チャート領域と、ウィジェットを定義する <div> の上端との間隔（ピクセル単位）を設定します。 型: Number デフォルト値: 25 |
| seriesHoverStyles | チャートのバーにマウスを合わせたときにバーのレンダリングに使用するスタイルの配列を設定します。 デフォルト値: [] |
| seriesList | チャートに表示するデータ値とラベルを含む系列オブジェクトの配列を作成します。 各系列オブジェクトは label 属性と data 属性で構成され、data 属性にはその系列固有の X 値と Y 値の配列が含まれます。通常は、X 値はテキストで Y 値は数値です。また、legendEntry 属性を使用して凡例に各系列オブジェクトを表示するかどうかを指定することもできます。 型: Array デフォルト値: [] |
| seriesStyles | チャートの各系列に対応するバーのレンダリングに使用するスタイルオブジェクトの配列を設定します。 型: Array デフォルト値: [] |
| seriesTransition | seriesList データが変化するときに使用するアニメーションオブジェクトを作成します。これにより、同じ系列のデータの変化を視覚的に表示できます。 型: wijmo.chart.chart_animation オブジェクト デフォルト値: {enabled:true, duration:400, easing: "easeInCubic"} |
| shadow | チャートの縁に影を付けるかどうかを示す値。 型: Boolean デフォルト値: false |
| showChartLabels | 各チャート要素の値を含むラベルを表示するかどうかを示す値。 型: Boolean デフォルト値: true
|
| stacked | 系列の各値が合計にどの程度寄与しているかを示すため、チャートのバーを積層するかどうかを決定する値を設定します。各バーがチャート領域を 100% 満たすようにする場合は、is100Percent オプションも true に設定します。 型: Boolean デフォルト値: false |
| textStyle | 他のスタイルオプションが設定されていないチャートテキストのフォールバックスタイルに使用するオブジェクトを作成します。 型: Object デフォルト値: {fill:"#888", "font-size": 10, stroke:"none"} |
| width | チャートの幅（ピクセル単位）を設定します。 型: Number デフォルト値: null |
| 名前 | 解説 | |
|---|---|---|
 | addSeriesPoint | 系列リストに系列ポイントを追加します。 |
| beginUpdate | オプションを再設定する間、チャートの自動更新を中断します。 |
| destroy | 機能を完全に除去します。これは要素を初期化前の状態に戻します。 |
| endUpdate | オプションが再設定された後、チャートの自動更新を元に戻します。 |
| exportChart | チャートをグラフィック形式でエクスポートします。このエクスポートメソッドは、ページに wijmo.exporter.chartExport の参照が存在する場合にのみ機能します。 |
| getBar | このメソッドは、指定したインデックスから、系列データのバーを表す Raphael オブジェクト（rect）のセットを持つバーを返します。 |
| getCanvas | Raphael キャンバスオブジェクトへの参照を返します。 |
| redraw | このメソッドはチャートを再描画します。 |
| widget | オリジナルの要素またはその他の関連する生成要素を含む jQuery オブジェクトを返します。 |
| 名前 | 解説 | |
|---|---|---|
 | beforePaint | このイベントは、キャンバスが描画される前に発生します。"return false" を使用してイベントをキャンセルできます。 型: Function デフォルト値: null |
| beforeSeriesChange | このイベントは、系列が変更される前に発生します。"return false" を使用してイベントをキャンセルできます。 型: Function デフォルト値: null |
| click | ユーザーがチャート要素をクリックしたときに発生します。 型: Function デフォルト値: null |
| mouseDown | このイベントは、ユーザーがマウスボタンをクリックしたときに発生します。 型: Function デフォルト値: null |
| mouseMove | マウスポインタがチャート要素の上にあるときにユーザーがマウスを動かすと発生します。 型: Function デフォルト値: null |
| mouseOut | ユーザーがチャート要素からマウスポインタを離したときに発生します。 |
| mouseOver | ユーザーがチャート要素にマウスポインタを最初に合わせたときに発生します。 |
| mouseUp | マウスポインタがチャート要素の上にあるときにユーザーがマウスボタンを離すと発生します。 |
| painted | このイベントは、キャンバスが描画された後に発生します。 |
| seriesChanged | このイベントは、系列が変更されたときに発生します。 |
