You can drag multiple rows at the same time and add duplicate data. You can right-click the chart and choose from the shortcut menu.
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute" creationComplete = "init ()">
<Mx: Script>
<! [CDATA [
Import mx. controls. Alert;
Import mx. controls. DataGrid;
Import mx. managers. DragManager;
Import mx. core. UIComponent;
Import mx. collections. ArrayCollection;
Import mx. events. DragEvent;
// Data source of the DataGrid
[Bindable]
Private var medalsAC: ArrayCollection = new ArrayCollection ([
{Country: "USA", Gold: 35, Silver: 39, Bronze: 29 },
{Country: "China", Gold: 99, Silver: 17, Bronze: 14 },
{Country: "Japan", Gold: 32, Silver: 27, Bronze: 38 },
{Country: "Korea", Gold: 27, Silver: 27, Bronze: 2 },
{Country: "Singapore", Gold: 55, Silver: 27, Bronze: 63 },
{Country: "North Korea", Gold: 11, Silver: 21, Bronze: 16 },
{Country: "Malaysia", Gold: 7, Silver: 14, Bronze: 77 },
{Country: "Australia", Gold: 0, Silver: 12, Bronze: 11}
]);
// ColumnChart data source, empty by default
[Bindable]
Private var chartData: ArrayCollection = new ArrayCollection ();
[Bindable]
Private var menu: ContextMenu = new ContextMenu ();
// Let columnChart listen to drag events
Private function init (): void {
Column. addEventListener (DragEvent. DRAG_ENTER, dragEnterHandle );
Column. addEventListener (DragEvent. DRAG_DROP, dragdropHandle );
// Initialize the context menu
InitMenu ();
}
// Initialize the chart context menu
Private function initMenu (): void
{
Var clear: ContextMenuItem = new ContextMenuItem ("clear Chart ");
Menu. customItems. push (clear );
Clear. addEventListener (ContextMenuEvent. MENU_ITEM_SELECT, clearAction );
}
// Process the right-click event
Private function clearAction (event: ContextMenuEvent): void
{
This. chartData. removeAll ();
}
// Because only the DataGrid is used for pushing and dropping, you are allowed to directly. If Multiple widgets on the Interface listen to drag events, you need to determine and allow the correct data to enter
Private function dragEnterHandle (e: DragEvent): void {
DragManager. acceptDragDrop (e. currentTarget as UIComponent)
}
// Drag and drop to release post-processing
Private function dragdropHandle (e: DragEvent): void {
// Add drag data to the dataprovider of column chart.
// If you only need specific data to enter column chart, you can filter the data first.
Var datas: Array = (e. dragInitiator as DataGrid). selectedItems;
For (var I: int = 0; I <datas. length; I ++)
{
// Do not include existing data before adding
If (! ChartData. contains (datas [I])
{
ChartData. addItem (datas [I]);
}
}
}
]>
</Mx: Script>
<Mx: DataGrid maid = "true" dataProvider = "{medalsAC}" x = "192" y = "52" allowMultipleSelection = "true">
<Mx: columns>
<Mx: DataGridColumn dataField = "Country" headerText = "Country"/>
<Mx: DataGridColumn dataField = "Gold" headerText = "Gold Medal"/>
<Mx: DataGridColumn dataField = "Silver" headerText = "Silver"/>
<Mx: DataGridColumn dataField = "Bronze" headerText = "Bronze"/>
</Mx: columns>
</Mx: DataGrid>
<! -- Define color -->
<Mx: SolidColor id = "sc1" color = "yellow" alpha = ". 8"/>
<Mx: SolidColor id = "sc2" color = "0 xCCCCCC" alpha = ". 6"/>
<Mx: SolidColor id = "sc3" color = "0xFFCC66" alpha = ". 6"/>
<! -- Define color -->
<Mx: Stroke id = "s1" color = "yellow" weight = "2"/>
<Mx: Stroke id = "s2" color = "0 xCCCCCC" weight = "2"/>
<Mx: Stroke id = "s3" color = "0xFFCC66" weight = "2"/>
<! -- Column chart can be set to parse data items such as Country: "Russia", Gold: 27, Silver: 27, and Bronze: 38 -->
<Mx: ColumnChart id = "column" contextMenu = "{menu }"
Height = "202"
Width = "402"
PaddingLeft = "5"
PaddingRight = "5"
ShowDataTips = "true"
DataProvider = "{chartData }"
X = "192" y = "215">
<! -- Set the horizontal axis -->
<Mx: horizontalAxis>
<! -- Drag data to the text display after the chart on the horizontal axis -->
<Mx: CategoryAxis categoryField = "Country"/>
</Mx: horizontalAxis>
<! -- Set a column -->
<! -- Fill color, stroke border color -->
<Mx: series>
<Mx: ColumnSeries
XField = "Country"
YField = "Gold"
DisplayName = "Gold Medal"
Fill = "{sc1 }"
Stroke = "{s1 }"
/>
<Mx: ColumnSeries
XField = "Country"
YField = "Silver"
DisplayName = "Silver"
Fill = "{sc2 }"
Stroke = "{s2 }"
/>
<Mx: ColumnSeries
XField = "Country"
YField = "Bronze"
DisplayName = "Bronze"
Fill = "{sc3 }"
Stroke = "{s3 }"
/>
</Mx: series>
</Mx: ColumnChart>
</Mx: Application>
