Vue component that encapsulates the wijmo.chart.FlexChart control.
The example below shows how to instantiate and initialize a wijmo.chart.FlexChart control using Vue markup:
<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>
The code sets the itemsSource property to a collection that contains the chart data and the bindingX property to the data property that contains the chart X values. It also sets the chart's header and footer properties to define titles to show above and below the chart.
The wj-flex-chart-legend and wj-flex-chart-axis components are used to customize the chart's legend and axes.
Finally, three wj-flex-chart-series components are used to specify the data properties to be shown on the chart.
Vue component that represents a wijmo.chart.Axis in one of the following components: wijmo.vue2.chart.WjFlexChart , wijmo.vue2.chart.WjFlexChartSeries , wijmo.vue2.chart.finance.WjFinancialChart or wijmo.vue2.chart.finance.WjFinancialChartSeries.
Vue component that represents a wijmo.chart.DataLabel in a wijmo.vue2.chart.WjFlexChart.
Vue component that represents a wijmo.chart.DataPoint in one of the following components: wijmo.vue2.chart.annotation.WjFlexChartAnnotationText , wijmo.vue2.chart.annotation.WjFlexChartAnnotationEllipse , wijmo.vue2.chart.annotation.WjFlexChartAnnotationRectangle , wijmo.vue2.chart.annotation.WjFlexChartAnnotationLine , wijmo.vue2.chart.annotation.WjFlexChartAnnotationPolygon , wijmo.vue2.chart.annotation.WjFlexChartAnnotationCircle , wijmo.vue2.chart.annotation.WjFlexChartAnnotationSquare or wijmo.vue2.chart.annotation.WjFlexChartAnnotationImage.
Vue component that represents a wijmo.chart.Legend in one of the following components: wijmo.vue2.chart.WjFlexChart , wijmo.vue2.chart.WjFlexPie , wijmo.vue2.chart.finance.WjFinancialChart , wijmo.vue2.chart.radar.WjFlexRadar or wijmo.vue2.chart.hierarchical.WjSunburst.
Vue component that represents a wijmo.chart.LineMarker in one of the following components: wijmo.vue2.chart.WjFlexChart or wijmo.vue2.chart.finance.WjFinancialChart.
Vue component that represents a wijmo.chart.PlotArea in one of the following components: wijmo.vue2.chart.WjFlexChart or wijmo.vue2.chart.finance.WjFinancialChart.
Vue component that represents a wijmo.chart.Series in a wijmo.vue2.chart.WjFlexChart.
Vue component that encapsulates the wijmo.chart.FlexPie control.
Vue component that represents a wijmo.chart.PieDataLabel in a wijmo.vue2.chart.WjFlexPie.
Wijmo interop module for Vue 2.
This module provides Vue 2 components that encapsulate Wijmo controls.
To use it, your application must include references to the Vue 2 framework (RC6 or later), as well as the regular Wijmo CSS and js files.
To add Wijmo controls to Vue pages, include the appropriate tags in your HTML files. For example, the code below adds an InputNumber control to a Vue page:
<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 event handler // update "sales" value to match the InputNumber value function salesChanged(sender, eventArgs) { this.sales = sender.value; }
The example illustrates the following important points:
:min="0"
).:value-changed="salesChanged"
).All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized. You can use this event to perform additional initialization in addition to setting properties in markup. For example: