GWT Highcharts 添加点功能的图表

GWT Highcharts 添加点功能的图表 介绍

我们已经在《GWT Highcharts 入门案例》一章中看到了用于绘制此图表的步骤。现在让我们考虑以下示例以进一步了解添加点功能的图表。

图表事件

向chart.event属性添加一个 click 方法。此方法使用图表中单击区域的 x、y 坐标向系列添加一个新点。

chart.setClickEventHandler(new ChartClickEventHandler() {
   @Override
   public boolean onClick(ChartClickEvent chartClickEvent) {
      series.addPoint(chartClickEvent.getXAxisValue(), chartClickEvent.getYAxisValue());  
      return true;  
   }
});

GWT Highcharts 添加点功能的图表 示例

package com.yiidian.helloWorld.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.RootPanel;
import org.moxieapps.gwt.highcharts.client.*;
import org.moxieapps.gwt.highcharts.client.events.ChartClickEvent;
import org.moxieapps.gwt.highcharts.client.events.ChartClickEventHandler;
import org.moxieapps.gwt.highcharts.client.events.PointClickEvent;
import org.moxieapps.gwt.highcharts.client.events.PointClickEventHandler;
import org.moxieapps.gwt.highcharts.client.labels.*;
import org.moxieapps.gwt.highcharts.client.plotOptions.*;

import java.util.Date;

public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        final Chart chart = new Chart()
                .setType(Series.Type.SCATTER)
                .setMargin(70, 50, 60, 80)
                .setChartTitleText("User supplied data")
                .setChartSubtitleText("Click the plot area to add a point. Click a point to remove it.")
                .setExporting(new Exporting()
                        .setEnabled(false)
                )
                .setLegend(new Legend()
                        .setEnabled(false)
                );

        chart.getXAxis()
                .setMinPadding(0.2)
                .setMaxPadding(0.2)
                .setMaxZoom(60);

        final YAxis yAxis = chart.getYAxis();
        yAxis.setAxisTitleText("Value")
                .setMinPadding(0.2)
                .setMaxPadding(0.2)
                .setMaxZoom(60)
                .setPlotLines(yAxis.createPlotLine()
                        .setValue(0)
                        .setWidth(1)
                        .setColor("#808080")
                );

        final Series series = chart.createSeries()
                .setPoints(new Number[][] {{20, 20}, {80, 80}});
        chart.addSeries(series);

        chart.setClickEventHandler(new ChartClickEventHandler() {
            @Override
            public boolean onClick(ChartClickEvent chartClickEvent) {
                series.addPoint(chartClickEvent.getXAxisValue(), chartClickEvent.getYAxisValue());
                return true;
            }
        });

        chart.setSeriesPlotOptions(new SeriesPlotOptions()
                .setLineWidth(1)
                .setPointClickEventHandler(new PointClickEventHandler() {
                    @Override
                    public boolean onClick(PointClickEvent pointClickEvent) {
                        Series series = chart.getSeries(pointClickEvent.getSeriesId());
                        if(series.getPoints().length > 1) {
                            pointClickEvent.getPoint().remove();
                        }
                        return true;
                    }}
                )
        );
        RootPanel.get().add(chart);
    }
}

输出结果为：