The preface of the Java language has the object-oriented characteristics that make many complicated issues can be decomposed into relatively independent objects. This article uses an object-oriented method to explain a detailed explanation from the decomposition to how to combine, and how to expand. From simple diagrams to a slightly complex plurality of shaped charts, readers can learn how easy it is to build an extensible chart component. Common chart type charts have a very intuitive visual effect, which can be easily used to compare data differences, patterns and trends. From a look, the commonly used charts mainly have a scatter plot, (fold) graph, histogram, etc. This article mainly discusses these graphic style. These each figure can produce more forms in combination with other types. The following is explained below: First, look at the scatter plot: Figure 1-1 is a typical scatter plot, which is two or two pairs of two-dimensional coordinates in a set of X values and a set of Y values. Depict. Generally, this graph reflects the correlation between the two sets of data. For example, to examine the relationship between the hardness and the quenching temperature of the steel, assume that the horizontal axis of the above figure indicates the temperature of the quenching, and the longitudinal axis represents the hardness of the steel measured, and we can see a trend from the above picture, ie quenching The higher the temperature, the greater the hardness of the steel. Let's take a line chart:
Figure 1-2 Figure 1-3
In the fold line diagram of Figures 1-2, it is assumed that the horizontal axis represents the annual sales of a mall in a mall in Monday to Sunday. We can see that its sales in the near weekend have risen sharply, and go to Sunday, and the most barters are Thursday. Typically, the line diagram may also represent the form of a pillar map, as shown in Figures 1-3. Complicated graphics
Figure 1-4 Figure 1-5 Figure 1-6
The data of the three graphics above is the same, but they can intuitively express the same meaning. The charts such as such a variety of forms, but they are all combined with these basic charts. Next section, let's take a look at the basic elements that make up the chart. The composition of the chart's main element chart is from the previous example. We can see that each chart consists of a horizontal axis, a longitudinal axis, and a different drawing shape. In order to understand, let's take a look at the following decomposition: Figure 2-1 below Figure 2-2 is a column gives adaptic jams 淖楹 淖楹 恚 螅ㄍ? -2 ), Can be clearly seen, it is composed of a chart area, a coordinate axis, a grid line, a chart shape, and the like: Chart: Contains all other chart elements. Coordinate axis (AXIS): Provides a coordinate reference for drawing shape. There is usually a vertical and a horizontal coordinate axis in a chart. The grid line is a reference in the scale of the coordinate axis, throughout the entire plot area. The grid line can also be divided into horizontal and vertical grid lines as the coordinate axis. The chart shape (PLOT): also uses the coordinate axis as a reference, and the data is drawn according to the corresponding shape at a certain ratio. So, fundamentally, a chart is composed of three basic visual elements: chart, coordinate axis, chart shape. The composition of the chart's main element chart is from the previous example. We can see that each chart consists of a horizontal axis, a longitudinal axis, and a different drawing shape. In order to understand, let's take a look at the following decomposition: Figure 2-1 below Figure 2-2 is a column gives adaptic jams 淖楹 淖楹 恚 螅ㄍ? -2 ), Can be clearly seen, it is composed of a chart area, a coordinate axis, a grid line, a chart shape, and the like: Chart: Contains all other chart elements. Coordinate axis (AXIS): Provides a coordinate reference for drawing shape. There is usually a vertical and a horizontal coordinate axis in a chart. The grid line is a reference in the scale of the coordinate axis, throughout the entire plot area. The grid line can also be divided into horizontal and vertical grid lines as the coordinate axis. The chart shape (PLOT): also uses the coordinate axis as a reference, and the data is drawn according to the corresponding shape at a certain ratio. So, fundamentally, a chart is composed of three basic visual elements: chart, coordinate axis, chart shape. The composition of the chart's main element chart is from the previous example. We can see that each chart consists of a horizontal axis, a longitudinal axis, and a different drawing shape. In order to understand, let's take a look at the following decomposition: Figure 2-1 below Figure 2-2 is a column gives adaptic jams 淖楹 淖楹 恚 螅ㄍ? -2 ), Can be clearly seen, it is composed of a chart area, a coordinate axis, a grid line, a chart shape, and the like: Chart: Contains all other chart elements. Coordinate axis (AXIS): Provides a coordinate reference for drawing shape. There is usually a vertical and a horizontal coordinate axis in a chart. The grid line is a reference in the scale of the coordinate axis, throughout the entire plot area. The grid line can also be divided into horizontal and vertical grid lines as the coordinate axis. The chart shape (PLOT): also uses the coordinate axis as a reference, and the data is drawn according to the corresponding shape at a certain ratio. So, fundamentally, a chart is composed of three basic visual elements: chart, coordinate axis, chart shape. The chart shape (PLOT) has a chart where there is a most important class, which is responsible for describing the shape shape of the data, we call Plot. Plot should be able to draw multiple groups of data, and this group of data, we specifically describe it with a model, this is DataSeries.
Since we discussed here is a two-dimensional chart, DataSeries should provide two groups that represent the x and y coordinates. Or let's take a look at their class diagrams (Figure 2-6): Figure 2-6 For PLOT to draw multi-group data, Plot also provides Draw (Graphics, DataSeries, in addition to the DRAW (Graphics) method inherited from ChartWidget. int) method to draw the data of a single group. The following code more telling: public abstract class Plot implements ChartWidget {protected int x; protected int y; protected int width; protected int height; protected XAxis xAxis; protected YAxis yAxis; protected ArrayList dataSeries; public int getX () {return x;} public int game () {return y;} public int getWidth () {Return Width;} public void addddata () {dataseries.add (ds);} PUBLIC Void RemoveDataSeries (Dataseries.Remove (DS);} public void draw (graphics g) {for (int i = 0; i The PLOT class is also designed to have an abstract class, and the specific drawing method is implemented by subclasses. And the DataSeries class is too simple, where we do not list the code. The chart (Chart) is finally the above element synthesize a complete chart, which is a CHART class. A Chart has a horizontal axis and a longitudinal axis and at least one PLOT, and can add multiple PLOT to it. Let's take a look at the entire CHART and its related class UML relationship: Figure 2-7 Due to limited space, there is no code of the Chart class. Complete a line diagram Since the previous introduction is just some interface or abstract classes, you must implement a chart component, you must also implement them. Here we take a line diagram as an example to complete a complete line diagram. Implementing the X-axis and Y-axis Axis abstract class has completed a most of the operation, and the remaining is to complete the X-axis and Y axes. Here we don't intend to list complete class code and only list key implementations. Public class xaxis extends axis {... public void draw (graphics g) {if (! ") Return; int Ticks = gettickcount (); int tickdist = (int) (4) (scale.getscreenmax () (Scrle.getscreenmax () -scale.getscreenmin ()) / (ticks 1)); int Tickx = scale.getscreenmin (); int ticky = peeraxis.getscale (). getScreenmin (); int GRIDLENGTH = peeraxis.getscale (). getScreenMax (); Int axislength = scale.getscreenmax () - scale.getscreenmin (); / * Set the axis color * / g.SetColor (Axiscolor); / * Draw horizontal axis * / g.drawline (Tickx, Ticky, Tickx Axislength , Ticky); For (int i = 0; i For (int i = 0; i public class DefaultDataSeries extends DataSeries {public DefaultDataSeries (Object [] yData) throws InvalidDataException {super (); if (! yData == null || (yData [0] instanceof Double)) throw new InvalidDataException (); for (int i = 0; i This defaultDataSeries provides a constructor that constructs a DataSeries with a set of Y coordinate values. The following is a very important part. Let's take a look at how simple LINEPLOT that implements a painting line: Public class lineplot Extends Plot {... public void draw (graphics g, dataseries ds, int index) {if (ds == null) return; g.setcolor (linecolor); double [] x = new double [ds.size )]; Double [] y = new double [ds.size ()]; int [] xpoints = new int [ds.size ()]; int [] ypoints = new int [ds.size ()]; for (); INT i = 0; i double [] y = new double [] {12.5,14.1,13.2,11.4,13.25,12.32}; try {DataSeries ds = new DefaultDataSeries (Primary2ObjectUtil.Doulbe2Object (y)); XAxis xaxis = new XAxis (new XScale (0, Y.LENGTH 1), DS.SIZE ()); Yaxis Yaxis = New Yaxis (New Yscale (10, 15), 4); Xaxis.SetDrawGrid (True); Yaxis.SetDrawGrid (TRUE); lineplot plot = new Lineplot (DS, XAXIS, YAXIS); Chart Chart = New Chart (Xaxis, Yaxis, Plot); JFrame Frame = New Jframe ("Line Plot Demo"); Frame.setSize (400, 300); frame.getContentPane (). Add (chart Frame.setVisible (TRUE);} catch (invalidDataException e) {E.PrintStackTrace (); Below is a screenshot of this program running: (Pacing chart of a single data) (Pacing chart with multiple sets of data) Extending other types of charts through the previous example, we know that a specific type of chart is implemented, as long as you implement specific The PLOT class is OK. If the data has a special format, you can only extend a DataSeries again. In order to deepen your understanding, we will explain with a histogram as an example. In Figures 1-2 and Figures 1-3 of the first section, we know that a set of data may represent the form of a column chart in addition to the polyline diagram. Here we use the data of the drawing diagram to implement a Barplot. The key code of Barplot is listed below: Public class barplot Extends Plot {... public void DRAW (GRAPHICS G, DATASERIES DS, INT INDEX) {IF (DS == NULL) Return; / * The number of columns per group * / INT Bars = this.dataseries.size (); / * Each pillar should have a width * / int barwidth = ((Double) xaxis.width / (Double) DS.Size () 1) / BARS-BARSPACE; IF (Barwidth <= 0) Barwidth = 1; Int Barx, Bar, Barw, Barh; Int Bars; Double Ymin = Yaxis.getscale (). getmin (); for (int i = 0; i Barplot is a bit more complicated than LinePlot. Mainly to calculate the position, width, and height of each column. Since the coordinates are different when considering the value of the multi-set column and the column, the coordinates are calculated. In general, it is quite simple to implement Barplot. Since the histogram running code is similar to the line diagram, the presentation code is not listed here. Let's take a look at the running screen in several cases: (the histogram of a single data) (multi-set data of the column chart) (a pillar map with negative value) Now we have a picture of the class LinePlot and painting Class BarPlot of the histogram. We have to generate an example of a line diagram combined with a histogram. Or come to see how code is implemented: DataSeries DS = New DefaultDataSeries (Primary2Objectutil.doulbe2Object (Y1)); Xaxis Xaxis = New Xaxis (New Xscale (0, Y1.Length 1), DS.Size ()); Yaxis Yaxis = New Yaxis (New Yscale (10, 15), 4); Xaxis.SetDrawGrid (True); Yaxis.SetDrawGrid (True); lineplot lineplot = new lineplot (DS, Xaxis, Yaxis); barplot barplot = new barplot (DS , Xaxis, Yaxis; / * Mr. Bar Chart * / Chart Chart = New Chart (Xaxis, Yaxis, Barplot); / * Then add Line Plot to Bar Chart * / Chart.AddPlot (LinePlot); In the code, let's build a line plot and a bar plot, regenerate it into a Bar Chart, then add Line Plot to Bar Chart. A combined chart is completely completed. Take a look: real-time drawings real-time drawing the most common thing is stock market. We don't intend to explain how to achieve such stock market. In order to explain the problem, we generate a data in a line to simulate real-time drawing. Here, we extends the front chart components. Here we use a design pattern: OBServer mode. When using the OBServer mode, all objects are changed, and all objects that depend on it are notified and automatically updated. So in OBServer, the key object is observed and the observer. An observation goal can have multiple observer. The observer must register in advance to the observation directory. This is likely to be notified when the status of the observed catalog changes. In our real-time drawing structure, DataSeries is observed, while Chart is the observer. To do this, we designed a DatachangeListener interface as an observer. We overload a Chart to implement DatachangeListener. Correspondingly, we also overload the DataSeries class, providing the mechanism of registered observer. Below is their structure: RealTimeChart object is registered with the RegisterDataChangeListener method in advance. When the data of the realTIMEDASERIES changes, the NotifyListener method is called to notify all registered DataChangeListener. The NOTIFY method will call the DataChanged method for each registered DatachangeListener object. As shown below: In RealTimeChart, the DataChanged method for the DataChangeListener interface is implemented: Public Class RealTimeChart Extends Chart Implements DatachangeListener {... / * Method for implementing DatachangeListener * / public void DataChanged () {repaint ();}} RealtimeChart's DataChart's DataChanged method is just simply redrawing yourself. Draw it automatically by new data when drawing. With OBServer mode, real-time drawings are simple to achieve like this. With real-time drawing examples, readers can easily write a drawing program that connects to the database or network stream, where we don't explain it. Conclusion This article has been completely explained to the build process of an extensible chart component. Readers can extend their components on this basis. For example, extending LinePlot, making it changing linear, line width, and a bit style and other functions. Or extend BarPlot so that it can use different fill mode. You can even extend AXIS to implement a graphic for 3D mode.
