You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by bi...@apache.org on 2018/03/27 08:58:02 UTC
[royale-asjs] branch feature/echarts updated: Databinding for xAxis
and Series data properties now work. We can now render a minimal ECharts
chart :-)
This is an automated email from the ASF dual-hosted git repository.
bigosmallm pushed a commit to branch feature/echarts
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/echarts by this push:
new b20cea7 Databinding for xAxis and Series data properties now work. We can now render a minimal ECharts chart :-)
b20cea7 is described below
commit b20cea74c8ce6426b8276014bc8305daecabf8ec
Author: Om Muppirala <bi...@apache.org>
AuthorDate: Tue Mar 27 01:57:49 2018 -0700
Databinding for xAxis and Series data properties now work. We can now render a minimal ECharts chart :-)
---
examples/royale/ECharts/asconfig.json | 2 +-
examples/royale/ECharts/src/Main.mxml | 32 +++++++++++++---------
examples/royale/ECharts/src/echarts/ECharts.as | 27 ++++--------------
.../royale/ECharts/src/echarts/EChartsOptions.as | 16 +++++------
examples/royale/ECharts/src/echarts/SeriesList.as | 27 ++++++++++++++++++
5 files changed, 60 insertions(+), 44 deletions(-)
diff --git a/examples/royale/ECharts/asconfig.json b/examples/royale/ECharts/asconfig.json
index f8eed96..bf0e474 100644
--- a/examples/royale/ECharts/asconfig.json
+++ b/examples/royale/ECharts/asconfig.json
@@ -3,7 +3,7 @@
"targets": [
"JSRoyale"
],
- "source-map": true,
+ "source-map": false,
"html-template": "template.html"
},
"files":
diff --git a/examples/royale/ECharts/src/Main.mxml b/examples/royale/ECharts/src/Main.mxml
index 1b95907..709ea88 100644
--- a/examples/royale/ECharts/src/Main.mxml
+++ b/examples/royale/ECharts/src/Main.mxml
@@ -6,16 +6,17 @@
>
<fx:Script>
<![CDATA[
- [Bindable] private var data:Array = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
- [Bindable] private var seriesData:Array = [5, 20, 36, 10, 10, 20];
+ [Bindable] private var data:Array;
+ [Bindable] private var salesData:Array;
+ [Bindable] private var profitData:Array;
private function onAppInitialize(event:Event):void
{
- setTimeout(function():void {
- this.data = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
- this.seriesData = [5, 20, 36, 10, 10, 20];
- },2000);
+ this.data = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
+ this.salesData = [5, 20, 36, 10, 10, 20];
+ this.profitData = [15, 12, 45, 8, 9, 54];
}
+
]]>
</fx:Script>
<js:initialView>
@@ -24,8 +25,8 @@
<ns2:chartOptions>
<ns2:EChartsOptions>
<ns2:title>
- <ns2:Title text="My ECharts Title" show="true"
- link="http://www.google.com" target="_self" />
+ <ns2:Title text="Sales vs. Profit" show="true"
+ link="https://ecomfe.github.io/echarts-examples/public/index.html" target="_self" />
</ns2:title>
<ns2:xAxis>
<ns2:XAxis data="{this.data}" position="top" />
@@ -33,11 +34,16 @@
<ns2:yAxis>
<ns2:YAxis/>
</ns2:yAxis>
- <ns2:series>
- <js:ArrayList>
- <ns2:Series name="Accounts" type="bar" data="{this.seriesData}" />
- </js:ArrayList>
- </ns2:series>
+ <ns2:seriesList>
+ <ns2:SeriesList>
+ <ns2:series>
+ <fx:Array>
+ <ns2:Series name="Sales" type="bar" data="{this.salesData}" />
+ <ns2:Series name="Profit" type="line" data="{this.profitData}" />
+ </fx:Array>
+ </ns2:series>
+ </ns2:SeriesList>
+ </ns2:seriesList>
</ns2:EChartsOptions>
</ns2:chartOptions>
</ns2:ECharts>
diff --git a/examples/royale/ECharts/src/echarts/ECharts.as b/examples/royale/ECharts/src/echarts/ECharts.as
index 4697a80..59d5141 100644
--- a/examples/royale/ECharts/src/echarts/ECharts.as
+++ b/examples/royale/ECharts/src/echarts/ECharts.as
@@ -23,31 +23,12 @@ package echarts
override protected function createElement():WrappedHTMLElement
{
echartsContainer = addElementToWrapper(this,'div');
- echartsContainer.setAttribute("style", "width: 600px;height:400px;");
-
+ echartsContainer.setAttribute("style", "width: 1200px;height:800px;");
echartsInstance = global["echarts"].init(echartsContainer);
echartsInstanceCreated = true;
-
- var option:Object =
- {
- xAxis:{},
- yAxis:{},
- series:[{
- data: [5, 20, 36, 10, 10, 20],
- type: "bar",
- name: "Sales"
- }]
- };
-
- //echartsInstance.setOption(option);
-
return echartsContainer;
}
- protected function handleChartOptionsChanged(event:Event):void {
- applyChartOptions(EChartsOptions(event.currentTarget).options);
- }
-
public function set chartOptions(v:EChartsOptions):void {
if(this._chartOptions == null) {
this._chartOptions = v;
@@ -63,9 +44,13 @@ package echarts
}
}
+ protected function handleChartOptionsChanged(event:Event):void {
+ applyChartOptions(EChartsOptions(event.currentTarget).options);
+ }
+
private function applyChartOptions(options:Object):void {
if(this.echartsInstanceCreated) {
- this.echartsInstance.setOption(options);
+ this.echartsInstance.setOption(options, true, true);
}
}
diff --git a/examples/royale/ECharts/src/echarts/EChartsOptions.as b/examples/royale/ECharts/src/echarts/EChartsOptions.as
index a922827..3fd0527 100644
--- a/examples/royale/ECharts/src/echarts/EChartsOptions.as
+++ b/examples/royale/ECharts/src/echarts/EChartsOptions.as
@@ -9,7 +9,7 @@ package echarts
private var _title:Title = new Title();
private var _xAxis:XAxis;
private var _yAxis:YAxis = new YAxis();
- private var _series:ArrayList;
+ private var _seriesList:SeriesList;
public function EChartsOptions() {
@@ -53,17 +53,15 @@ package echarts
}
[Bindable("chartOptionsChanged")]
- public function get series():ArrayList
+ public function get seriesList():SeriesList
{
- return _series;
+ return _seriesList;
}
- public function set series(value:ArrayList):void
+ public function set seriesList(value:SeriesList):void
{
- _series = value;
- this._series.addEventListener(CollectionEvent.ITEM_UPDATED, this.optionsChanged);
- this._series.addEventListener(CollectionEvent.COLLECTION_CHANGED, this.optionsChanged);
- this._series.addEventListener(CollectionEvent.ITEM_ADDED, this.optionsChanged);
+ _seriesList = value;
+ _seriesList.addEventListener("seriesListChanged", this.optionsChanged);
dispatchEvent(new Event("chartOptionsChanged"));
}
@@ -75,7 +73,7 @@ package echarts
}
protected function getSeriesValues():Array {
- var a:Array = this.series.source.map(function(item:Series):Object {
+ var a:Array = this.seriesList.series.map(function(item:Series):Object {
return item.obj;
});
return a;
diff --git a/examples/royale/ECharts/src/echarts/SeriesList.as b/examples/royale/ECharts/src/echarts/SeriesList.as
new file mode 100644
index 0000000..40b3e9b
--- /dev/null
+++ b/examples/royale/ECharts/src/echarts/SeriesList.as
@@ -0,0 +1,27 @@
+package echarts
+{
+
+ import org.apache.royale.events.EventDispatcher;
+
+ public class SeriesList extends EventDispatcher{
+ private var _seriesArray:Array = [];
+
+ [Bindable("seriesListChanged")]
+ public function get series():Array {
+ return _seriesArray;
+ }
+
+ public function set series(v:Array):void {
+ _seriesArray = v;
+ for(var i:int=0; i<_seriesArray.length; i++) {
+ _seriesArray[i].addEventListener("seriesChanged", handleSeriesChanged);
+ }
+ dispatchEvent(new Event("seriesListChanged"));
+ }
+
+ protected function handleSeriesChanged(event:Event):void {
+ dispatchEvent(new Event("seriesListChanged"));
+ }
+
+ }
+}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
bigosmallm@apache.org.