|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{ZKChartsEssentialsPageHeader}}
| |
| | | | |
| − | {{Template:UnderConstruction}}
| |
| − | ZK Chart will fire events when user is interacting with chart, so we can declare a method to listen the event and handle the event data.
| |
| − |
| |
| − | ==ChartsEvent==
| |
| − | ChartsEvent represents an event cause by user's interaction. If we want to shift the point's position when user clicking, we can listen the <tt>onPlotClick</tt> event and retrieve the point being clicked. Then update the point's position like below:
| |
| − |
| |
| − | ==== shift.zul ====
| |
| − | <source lang="xml" high="2">
| |
| − | <window apply="ShiftComposer">
| |
| − | <charts id="chart" type="bubble" title="" />
| |
| − | </window>
| |
| − | </source>
| |
| − |
| |
| − | ==== ShiftComposer.java ====
| |
| − | <source lang="java" high="13, 14,15,16,17, 18, 19">
| |
| − | public class ShiftComposer extends SelectorComposer<Window> {
| |
| − | @Wire
| |
| − | Charts chart;
| |
| − |
| |
| − | public void doAfterCompose(Window comp) throws Exception {
| |
| − | super.doAfterCompose(comp);
| |
| − | // Initial series data
| |
| − | initPoints();
| |
| − | // Hide some unnecessary options
| |
| − | hideOptions();
| |
| − | }
| |
| − |
| |
| − | @Listen("onPlotClick = #chart")
| |
| − | public void shiftPoint(ChartsEvent event) {
| |
| − | // Retrieve the point object.
| |
| − | Point point = event.getPoint();
| |
| − | // Shift the point by updating its x value.
| |
| − | point.update(point.getX().intValue() + random() / 10, point.getY());
| |
| − | }
| |
| − |
| |
| − | private void initPoints() {
| |
| − | for (int i = 0; i < 10; i ++) {
| |
| − | chart.getSeries(i).addPoint(random(), random(), i * 5);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | private void hideOptions() {
| |
| − | // Remove y axis title
| |
| − | chart.getYAxis().setTitle("");
| |
| − | // Hide the legend.
| |
| − | chart.getLegend().setEnabled(false);
| |
| − | // Hide the tooltip.
| |
| − | chart.getTooltip().setEnabled(false);
| |
| − | // Hide the exporting button.
| |
| − | chart.getExporting().setEnabled(false);
| |
| − | // Initialize series data
| |
| − | }
| |
| − |
| |
| − | private double random() {
| |
| − | // Returns random integer ranged from 0 to 100.
| |
| − | return Math.round((Math.random() * 100));
| |
| − | }
| |
| − | }
| |
| − | </source>
| |
| − |
| |
| − | Congratulations! Now the user could interact with chart. Here is what it shows:
| |
| − |
| |
| − | [[File:PlotClickEventBefore.png]]
| |
| − |
| |
| − | When use click the maroon, it will shift to the right a bit.
| |
| − |
| |
| − | [[File:PlotClickEventAfter.png]]
| |
| − |
| |
| − | === Table of ChartsEvent and Description ===
| |
| − | {| border="1"
| |
| − | |-
| |
| − | !EventName||Description
| |
| − | |-
| |
| − | ||onPlotClick
| |
| − | ||Fires when the series is clicked.
| |
| − | |-
| |
| − | ||onPlotCheckboxClick
| |
| − | ||Fires when the checkbox next to the series' name in the legend is clicked.
| |
| − | |-
| |
| − | ||onPlotLegendItemClick
| |
| − | ||Fires when the legend item belonging to the series is clicked. (Not applicable to pies).
| |
| − | |-
| |
| − | ||onPlotShow
| |
| − | ||Fires when the series is shown after chart generation time, by clicking the legend item.
| |
| − | |-
| |
| − | ||onPlotHide
| |
| − | ||Fires when the series is hidden after chart generation time, by clicking the legend item.
| |
| − | |-
| |
| − | ||onPlotMouseOver
| |
| − | ||Fires when the mouse enters the graph.
| |
| − | |-
| |
| − | ||onPlotMouseOut
| |
| − | ||Fires when the mouse leaves the graph.
| |
| − | |-
| |
| − | ||onPlotDrillUp
| |
| − | ||Fires when drilling up from a drilldown series.
| |
| − | |-
| |
| − | ||onPlotDrillDown
| |
| − | ||Fires when a drilldown point is clicked, before the new series is added.
| |
| − | |}
| |
| − |
| |
| − | ==ClickEvent==
| |
| − | What if we want to select the bubble and move it to the location we click? We can modify the previous sample code as below:
| |
| − | <source lang="java" high="13, 18">
| |
| − | ...
| |
| − | private Point selectedPoint; // Record selected point.
| |
| − | ...
| |
| − | @Listen("onPlotClick = #chart")
| |
| − | public void selectPoint(ChartsEvent event) {
| |
| − | // Retrieve the clicked point
| |
| − | selectedPoint = event.getPoint();
| |
| − | // Select the point
| |
| − | selectedPoint.select();
| |
| − | }
| |
| − |
| |
| − | @Listen("onClick = #chart")
| |
| − | public void movePoint(ChartsClickEvent event) {
| |
| − | // Do nothing if there is no selected point
| |
| − | if (selectedPoint == null)
| |
| − | return;
| |
| − | // Move the selected point to the location where user clicked.
| |
| − | selectedPoint.update(event.getXAxis(), event.getYAxis(), selectedPoint.getHigh());
| |
| − | selectedPoint = null;
| |
| − | }
| |
| − | ....
| |
| − | </source>
| |
| − | '''Note:''' You can use <tt>ChartsClickEvent</tt> which extends <tt>ClickEvent</tt> to get the value of x and y axises.
| |
| − |
| |
| − | {{ZKChartsEssentialsPageFooter}}
| |