v5.20191.603
|

wijmo.vue2.chart モジュール

Vue 2用のWijmo相互運用モジュール。

このモジュールは、Wijmoコントロールをカプセル化したVue 2コンポーネントを提供します。

これを使用するには、Vue 2フレームワーク(RC6以上)への参照、 および 通常のWijmo CSSファイルとjsファイルをアプリケーションに含める必要があります。

VueページにWijmoコントロールを追加するには、 HTMLファイルに適切なタグを含めます。 たとえば、次のコードは、 Vueページに InputNumber コントロールを追加します。

<wj-input-number
  format="c2"
  placeholder="Sales"
  :value="sales"
  :value-changed="salesChanged"
  :min="0"
  :max="10000"
  :step="100"
  :is-required="false">
</wj-input-number>
// Wijmoイベントハンドラ
// InputNumber値と比較する"sales"値を更新します 
function salesChanged(sender, eventArgs) {
  this.sales = sender.value;
}

この例は、次の重要なポイントを示しています。

  1. Wijmoコントロールのタグ名は、"wj"プリフィックスで始まり、 その後に 英小文字とハイフン区切り文字を使用したコントロール名が続きます。
  2. タグ属性名は、コントロールのプロパティやイベントと同じです。
  3. 属性名の前のコロンは、属性値がJavaScript式として 解釈されることを示します ( :min="0"など)。
  4. イベントハンドラは、通常のプロパティと同様に指定します ( :value-changed="salesChanged"など)。
  5. Vue2では、すべての連結が一方向です。上の例では、"salesChanged" イベントハンドラは、 モデル内の"sales"プロパティの値を更新します。 これはVue 1からの変更点です。 Vue 1では、どのような属性にでも ".sync"サフィックスを追加することで、双方向連結を作成できます。

すべてのWijmo Vueコンポーネントには、"initialized"イベントがあります。 これは、コントロールがページに追加されて初期化された後に発生します。 このイベントを使用して、マークアップでプロパティを設定するほかに、 追加的な初期化を実行できます。次に例を示します。

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
// Vue アプリケーション
var app = new Vue({
  el: '#app',
  methods: {
    initGrid: function(s, e) {
      // グリッドにカスタムMergeManagerを割り当てます
      s.mergeManager = new CustomMergeManager(s);
    }
  }
});

変数

WjFlexChart

WjFlexChart: any

wijmo.chart.FlexChart コントロールをカプセル化するVueコンポーネント。

次の例は、Vueマークアップで wijmo.chart.FlexChart コントロールをインスタンス化して初期化する方法を示します。

<wj-flex-chart
    :items-source="data"
    binding-x="country"
    :header="props.header"
    :footer="props.footer">

    <wj-flex-chart-legend :position="props.legendPosition">
    </wj-flex-chart-legend>
    <wj-flex-chart-axis wj-property="axisX" :title="props.titleX">
    </wj-flex-chart-axis>
    <wj-flex-chart-axis wj-property="axisY" :title="props.titleY">
    </wj-flex-chart-axis>

    <wj-flex-chart-series name="Sales" binding="sales">
    </wj-flex-chart-series>
    <wj-flex-chart-series name="Expenses" binding="expenses">
    </wj-flex-chart-series>
    <wj-flex-chart-series name="Downloads" binding="downloads">
    </wj-flex-chart-series>
</wj-flex-chart>

このコードは、チャートデータを含むコレクションを itemsSource プロパティに設定し、 チャートのX値を含むデータプロパティを bindingX プロパティに設定します。 また、チャートの header プロパティと footer プロパティを設定して、 チャートの上下に表示するタイトルを定義します。

wj-flex-chart-legend コンポーネントと wj-flex-chart-axis コンポーネントは、 チャートの凡例と軸をカスタマイズするために使用されます。

最後に、3つの wj-flex-chart-series コンポーネントを使用して、 チャートに表示するデータプロパティを指定します。

WjFlexChartAxis

WjFlexChartAxis: any

次のコンポーネントのいずれかに wijmo.chart.Axis を表すVueコンポーネント。 wijmo.vue2.chart.WjFlexChartwijmo.vue2.chart.WjFlexChartSerieswijmo.vue2.chart.finance.WjFinancialChart 、 またはwijmo.vue2.chart.finance.WjFinancialChartSeries

WjFlexChartDataLabel

WjFlexChartDataLabel: any

wijmo.vue2.chart.WjFlexChart のwijmo.chart.DataLabel を表す Vueコンポーネント。

WjFlexChartDataPoint

WjFlexChartDataPoint: any

WjFlexChartLegend

WjFlexChartLegend: any

WjFlexChartLineMarker

WjFlexChartLineMarker: any

次のコンポーネントのいずれかにwijmo.chart.LineMarker を表すVueコンポーネント。 wijmo.vue2.chart.WjFlexChart 、 またはwijmo.vue2.chart.finance.WjFinancialChart

WjFlexChartPlotArea

WjFlexChartPlotArea: any

次のコンポーネントのいずれかに wijmo.chart.PlotArea を表すVueコンポーネント。 wijmo.vue2.chart.WjFlexChart 、 またはwijmo.vue2.chart.finance.WjFinancialChart

WjFlexChartSeries

WjFlexChartSeries: any

wijmo.vue2.chart.WjFlexChartwijmo.chart.Series を表す Vueコンポーネント。

WjFlexPie

WjFlexPie: any

wijmo.chart.FlexPie コントロールをカプセル化するVueコンポーネント。

WjFlexPieDataLabel

WjFlexPieDataLabel: any

wijmo.vue2.chart.WjFlexPie のwijmo.chart.PieDataLabel を表す Vueコンポーネント。