Use XCL-Charts to customize the multi-column stacked chart and xcl-charts to customize the column

Use XCL-Charts to customize the multi-column stacked chart and xcl-charts to customize the column

Some netizens posted a picture and asked me how to implement it. Unlike the ordinary bar chart, this chart is very special. I believe it will not be easy to find a ready-made chart.

Generally, the chart library is not a bar chart in the general sense, but a stacked chart, which is rarely displayed together. There is no way to achieve it only after customization.

Original images of netizens (should there be no infringement)

Implemented Using XCL-Charts:

The surface of the netizen looks like the same label and two stacked columns are placed side by side. However, in my experience, it is difficult to make the chart library provide such a chart in an original sense,

It is difficult to calculate parameters and data locations. You can only use existing charts in a hybrid manner. After careful observation, we found that we only need to merge the two columns together

To achieve this effect.

That is, first draw a column chart with a higher level, and then draw a column chart with a lower level of data. Of course, if the data is changed and the current height may be lower, this method cannot be used,

However, this figure does not need to be considered.

Some code of the custom program is as follows:

Private String TAG = "MultiBarchart201View"; private BarChart chart = new BarChart (); private BarChart chart2 = new BarChart (); // label axis private List <String> chartLabels = new feature List <String> (); private List <BarData> chartData = new feature List <BarData> (); private List <BarData> chartData2 = new partition List <BarData> (); private int axisColor = Color. rgb (125,223,252); public MultiBarChart01View (Context contex T) {super (context); // TODO Auto-generated constructor stubinitView ();} public MultiBarChart01View (Context context, AttributeSet attrs) {super (context, attrs ); initView ();} public MultiBarChart01View (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); initView ();} private void initView () {chartLabels (); chartDataSet (); chartDataSet2 (); chartRender (); chartRender2 ();}@ Override protected void onSizeChanged (int w, int h, int oldw, int oldh) {super. onSizeChanged (w, h, oldw, oldh); // chart size range chart. setChartRange (w, h); chart2.setChartRange (w, h);} private void chartRender () {try {// set the default indent px value in the drawing area. Axis is displayed in the reserved space, axistitle....int [] ltrb = getbarlndefadefaspadding (); chart. setPadding (ltrb [0], ltrb [1], DensityUtil. dip2px (getContext (), 45), ltrb [3]); // data source chart. setDataSource (char TData); chart. setCategories (chartLabels); // data axis chart. getDataAxis (). setAxisMax (2500); chart. getDataAxis (). setAxisMin (0); chart. getDataAxis (). setAxisSteps (500); // leave no blank chart between the columns. getBar (). setBarInnerMargin (0d); // hide the axis chart. getDataAxis (). setVisible (false); chart. getCategoryAxis (). setVisible (false); // set the Bar style to Fill chart. getBar (). setBarStyle (XEnum. barStyle. FILL); chart. setApplyBackgroundColor (true); chart. se TBackgroundColor (Color. rgb (19,163,224);} catch (Exception e) {// TODO Auto-generated catch blockLog. e (TAG, e. toString () ;}} private void chartRender2 () {try {// set the default indent px value in the drawing area, and display Axis, Axistitle....int [] ltrb = getbarlndefadefaspadding () in the reserved space (); chart2.setPadding (ltrb [0], ltrb [1], DensityUtil. dip2px (getContext (), 45), ltrb [3]); // display the border // chart2.showRoundBorder (); chart2.getBar (). setBarStyle (XEnum. barStyle. F ILL); // Title chart2.setTitle ("debt ratio standard backup: 40% ~ 60% "); chart2.addSubtitle (" (XCL-Charts Demo) "); chart2.getPlotTitle (). getTitlePaint (). setColor (axisColor); chart2.getPlotTitle (). getSubtitlePaint (). setColor (axisColor); // data source chart2.setDataSource (chartData2); chart2.setCategories (chartLabels); // axis title chart2.getAxisTitle (). setLeftAxisTitle ("amount"); chart2.getAxisTitle (). setLowerAxisTitle ("asset-liability ratio"); // data axis chart2.getDataAxis (). setAxisMax (2500); chart2.getDataAxis (). setAxisMin (0); chart2.getDataAxis (). setAxisSteps (500); // defines the data axis Label display format chart2.getDataAxis (). setLabelFormatter (new IFormatterTextCallBack () {@ Overridepublic String textFormatter (String value) {// TODO Auto-generated method stubDouble tmp = Double. parseDouble (value); DecimalFormat df = new DecimalFormat ("#0"); String label = df. format (tmp ). toString (); return (label) ;}}); // leave no space between the columns chart2.getBar (). setBarInnerMargin (0d); // axis color chart2.getDataAxis (). getAxisPaint (). setColor (axisColor); chart2.getCategoryAxis (). getAxisPaint (). setColor (axisColor); chart2.getDataAxis (). getTickMarksPaint (). setColor (axisColor); chart2.getCategoryAxis (). getTickMarksPaint (). setColor (axisColor); chart2.getDataAxis (). getTickLabelPaint (). setColor (axisColor); chart2.getCategoryAxis (). getTickLabelPaint (). setColor (axisColor); chart2.getAxisTitle (). getLeftAxisTitlePaint (). setColor (axisColor); chart2.getAxisTitle (). getLowerAxisTitlePaint (). setColor (axisColor); // hide the legend chart2.getPlotLegend (). hideLegend ();} catch (Exception e) {// TODO Auto-generated catch blockLog. e (TAG, e. toString () ;}} private void chartDataSet () {// List of the column dataset corresponding to the tag <Double> dataSeriesA = new shard List <Double> (); dataSeriesA. add (2400d); dataSeriesA. add (2400d); dataSeriesA. add (2400d); dataSeriesA. add (2400d); dataSeriesA. add (2400d); BarData BarDataA = new BarData ("current asset", dataSeriesA, (int) Color. rgb (58,191,247); List <Double> dataSeriesB = new partition List <Double> (); dataSeriesB. add (2000d); dataSeriesB. add (2000d); dataSeriesB. add (2000d); dataSeriesB. add (2000d); dataSeriesB. add (2000d); BarData BarDataB = new BarData ("non-current asset", dataSeriesB, (int) Color. rgb (20,181,251); chartData. add (BarDataA); chartData. add (BarDataB); List <Double> dataSeriesAA = new external List <Double> (); dataSeriesAA. add (0d); BarData BarDataAA = new BarData ("debt", dataSeriesAA, (int) Color. rgb (38,137,176); List <Double> dataSeriesBB = new external List <Double> (); dataSeriesBB. add (0d); BarData BarDataBB = new BarData ("Owner benefits", dataSeriesBB, (int) Color. rgb (13,116,161); chartData. add (BarDataAA); chartData. add (BarDataBB);} private void chartDataSet2 () {// List of the column dataset corresponding to the label <Double> dataSeriesA = new partition List <Double> (); dataSeriesA. add (1600d); dataSeriesA. add (1700d); dataSeriesA. add (1800d); dataSeriesA. add (1800d); dataSeriesA. add (1500d); BarData BarDataA = new BarData ("debt", dataSeriesA, (int) Color. rgb (38,137,176); List <Double> dataSeriesB = new partition List <Double> (); dataSeriesB. add (1500d); dataSeriesB. add (1300d); dataSeriesB. add (1400d); dataSeriesB. add (mongod); dataSeriesB. add (1600d); BarData BarDataB = new BarData ("Owner benefits", dataSeriesB, (int) Color. rgb (13,116,161); chartData2.add (BarDataA); chartData2.add (BarDataB);} private void chartLabels () {chartLabels. add ("20%"); chartLabels. add ("40%"); chartLabels. add ("60%"); chartLabels. add ("80%"); chartLabels. add ("100%") ;}@ Override public void render (Canvas canvas) {try {chart. render (canvas); chart2.render (canvas); // draw the axis point float radius = 10f; Paint paint = new Paint (); paint. setAntiAlias (true); paint. setColor (this. axisColor); canvas. drawCircle (chart2.getPlotArea (). getLeft (), chart2.getPlotArea (). getBottom (), radius, paint); canvas. drawCircle (chart2.getPlotArea (). getRight (), chart2.getPlotArea (). getBottom (), radius, paint); canvas. drawCircle (chart2.getPlotArea (). getLeft (), chart2.getPlotArea (). getTop (), radius, paint);} catch (Exception e) {Log. e (TAG, e. toString ());}}

Now, the graph is drawn. The code is not long and I believe it can be understood.

In particular, You need to draw an axis point in the code. In the source image, both ends and intersections of the axis have a white point. XCL-Charts does not have this function by default, but the positions of these three points,

It can be obtained in XCL-Charts, so simply add three pieces of code to draw the circle in render. The style of the legend is a little different from that of the Axis title, but this is no longer a big problem. If

The same requirement is also required. It is not difficult to customize a legend and axis title after the position can be obtained from XCL-Charts according to the relevant function.

It is found that there are too many personalized charts and there are many different types of charts that have never been seen before. It is difficult to consider these situations. Therefore, the flexibility and customization of chart libraries become more and more important, however, I found that few people carefully read the chart library,

They all like to check whether the target is the same, and they are not found everywhere. When the chart is really special, wait and cry. Haha.

This example has been included in the demo of the XCL-Charts chart library. If you are interested, go and have a look.

 

MAIL: xcl_168@aliyun.com

BLOG: http://blog.csdn.net/xcl168

 

 

 

In excel, how does one display the data stacked chart and the column chart on the same axis, that is, to form a comparison, note: the stacked chart and the column chart, the effect

Select a stacked chart for all the two groups of data.
Then select a group of data.
Right click ---- change the icon type of the Series
Select column chart
Done ~

How to use excel to create a three-position Stacked column chart

Select your data area-insert-chart-select the column chart on the left, and select the three-dimensional Stacked column on the right-next-step.
If you have any questions, you can continue to ask.