效果图：

先上自定义view，因为要把所有的方法写在activity里实在是太麻烦了，其实就是一个工具类。

第一个普通柱状图

要求是固定宽度左右滑动，没有网格，长文字斜展示


public class MBarChart extends BarChart {BChartMarkerView markerView;public MBarChart(Context context) {super(context);}public MBarChart(Context context, AttributeSet attrs) {super(context, attrs);}public MBarChart(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}private void initSetting() {/*xy轴设置*///x轴设置显示位置在底部mXAxis.setPosition(XAxis.XAxisPosition.BOTTOM);mXAxis.setGranularity(1f);//mXAxis.setCenterAxisLabels(true);mXAxis.setLabelCount(7);mXAxis.setTextSize(8f);//文字倾斜展示mXAxis.setLabelRotationAngle(-60);//保证y轴从0开始 不然会上移一点mAxisLeft.setAxisMinimum(0f);mAxisRight.setAxisMinimum(0f);mAxisRight.enableGridDashedLine(10f,10f,10f);//不显示X轴 Y轴线条mXAxis.setDrawAxisLine(true);mXAxis.setDrawGridLines(false);mXAxis.setGridColor(Color.TRANSPARENT);//mAxisLeft.setDrawAxisLine(false);mAxisRight.setDrawAxisLine(false);mAxisLeft.setDrawGridLines(false);mAxisRight.setDrawGridLines(false);//不显示左侧Y轴mAxisRight.setEnabled(false);/*折现图例 标签 设置*/mLegend.setForm(Legend.LegendForm.LINE);mLegend.setTextSize(0f);//显示位置mLegend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);mLegend.setOrientation(Legend.LegendOrientation.HORIZONTAL);/*是否绘制在表里*/mLegend.setDrawInside(false);//不显示右下角描述内容mDescription.setEnabled(false);setDescription(mDescription);}public void setBarDataSet( int color, int size, final List<BarEntry> list,String[] v) {BarDataSet barDataSet=new BarDataSet(list,"");barDataSet.setColor(color);barDataSet.setFormLineWidth(0f);barDataSet.setFormSize(0f);barDataSet.setDrawValues(false);BarData barData=new BarData(barDataSet);barData.setValueTextSize(10f);ValueFormatter xAxisFormatter = new DayAxisValueFormatter(v,DayAxisValueFormatter.DAY);mXAxis.setValueFormatter(xAxisFormatter);if (size<10){barData.setBarWidth((float) size/10f);setData(barData);}else {setData(barData);setChartData(size);}setChartEffect();initSetting();}/*设置图表效果*/private void setChartEffect(){//不可以手动缩放setScaleXEnabled(false);setScaleYEnabled(false);setScaleEnabled(false);//背景颜色setBackgroundColor(Color.WHITE);//不显示图表网格setDrawGridBackground(false);setDrawBorders(false);//背景阴影setDrawBarShadow(false);setHighlightFullBarEnabled(false);//显示柱图底层阴影setDrawBarShadow(false);//设置动画效果animateY(1000,Easing.EasingOption.Linear);animateX(1000,Easing.EasingOption.Linear);}/* marker */public void setMarkerView(Context context) {markerView=new BChartMarkerView(context);setMarker(markerView);}/*固定宽*/private void setChartData(int size){Matrix m = new Matrix();m.postScale(scaleNum(size), 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍getViewPortHandler().refresh(m, this, false);//将图表动画显示之前进行缩放}//30个横坐标时，缩放4f是正好的。private float scalePercent = 3f/30f;private float scaleNum(int xCount){return xCount * scalePercent;}}

第二个横向柱状图

要求是没有网格有阴影

package com.example.lmy.cardkt.chart;import android.content.Context;
import android.graphics.Color;
import android.graphics.Matrix;
import android.util.AttributeSet;import com.github.mikephil.charting.animation.Easing;
import com.github.mikephil.charting.charts.HorizontalBarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.IValueFormatter;
import com.github.mikephil.charting.utils.ViewPortHandler;import java.util.List;public class HorizontalBarChartView extends HorizontalBarChart {public HorizontalBarChartView(Context context) {super(context);}public HorizontalBarChartView(Context context, AttributeSet attrs) {super(context, attrs);}public HorizontalBarChartView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}private void initSetting() {/*xy轴设置*///x轴设置显示位置在底部mXAxis.setPosition(XAxis.XAxisPosition.BOTTOM);mXAxis.setGranularity(1f);mXAxis.setLabelCount(7);mXAxis.setTextSize(8f);//保证y轴从0开始 不然会上移一点mAxisLeft.setAxisMinimum(0f);mAxisRight.setAxisMinimum(0f);mAxisRight.enableGridDashedLine(10f,10f,10f);//不显示X轴 Y轴线条mXAxis.setDrawAxisLine(false);mXAxis.setDrawGridLines(false);mXAxis.setGridColor(Color.TRANSPARENT);//mAxisLeft.setDrawAxisLine(false);mAxisRight.setDrawAxisLine(false);mAxisLeft.setDrawGridLines(false);mAxisRight.setDrawGridLines(false);//不显示左侧Y轴mAxisRight.setEnabled(false);mAxisLeft.setEnabled(false);/*折现图例 标签 设置*/mLegend.setForm(Legend.LegendForm.LINE);mLegend.setTextSize(0f);//显示位置mLegend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);mLegend.setOrientation(Legend.LegendOrientation.HORIZONTAL);/*是否绘制在表里*/mLegend.setDrawInside(false);//不显示右下角描述内容mDescription.setEnabled(false);setDescription(mDescription);}/*设置图表效果*/private void setChartEffect(){//不可以手动缩放setScaleXEnabled(false);setScaleYEnabled(false);setScaleEnabled(false);//        //背景颜色
//        setBackgroundColor(Color.WHITE);//不显示图表网格setDrawGridBackground(false);setDrawBorders(false);setHighlightFullBarEnabled(false);//显示柱图底层阴影setDrawBarShadow(true);//最大显示值//setMaxVisibleValueCount(100);//限制长度在图表内部setDrawValueAboveBar(true);setPinchZoom(false);setFitBars(true);//设置动画效果animateY(1000,Easing.EasingOption.Linear);animateX(1000,Easing.EasingOption.Linear);}/*固定宽*/private void setChartData(int size){Matrix m = new Matrix();m.postScale(scaleNum(size), 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍getViewPortHandler().refresh(m, this, false);//将图表动画显示之前进行缩放}//30个横坐标时，缩放4f是正好的。private float scalePercent = 3f/30f;private float scaleNum(int xCount){return xCount * scalePercent;}public void setBarDataSet(int color, int size, final List<BarEntry> list, String[] v) {BarDataSet barDataSet=new BarDataSet(list,"");barDataSet.setColor(color);barDataSet.setFormLineWidth(0f);barDataSet.setFormSize(0f);barDataSet.setDrawValues(false);BarData barData=new BarData(barDataSet);barData.setValueTextSize(10f);ValueFormatter xAxisFormatter = new DayAxisValueFormatter(v,DayAxisValueFormatter.DAY);mXAxis.setValueFormatter(xAxisFormatter);//ValueFormatter dataFormatter = new DayAxisValueFormatter(v,DayAxisValueFormatter.PERCENT);barData.setValueFormatter(new IValueFormatter() {@Overridepublic String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {return ((int)entry.getY())+"%";}});barData.setValueTextSize(10f);barData.setValueTextColor(Color.WHITE);barData.setDrawValues(true);if (size<6){barData.setBarWidth((float) size/10f);setData(barData);}else {setData(barData);setChartData(size);}setChartEffect();initSetting();}}

第三个叠层柱状图

要求是没有网格 x轴中文

public class MultipleBarChartView extends BarChart {private BChartMarkerView markerView;public MultipleBarChartView(Context context) {super(context);}public MultipleBarChartView(Context context, AttributeSet attrs) {super(context, attrs);}public MultipleBarChartView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}/*设置图表效果*/private void setChartEffect(){//不可以手动缩放setScaleXEnabled(false);setScaleYEnabled(false);setScaleEnabled(false);//背景颜色setBackgroundColor(Color.WHITE);//不显示图表网格setDrawGridBackground(false);setDrawBorders(false);//背景阴影setDrawBarShadow(false);setHighlightFullBarEnabled(false);//显示柱图底层阴影setDrawBarShadow(false);//设置动画效果animateY(1000,Easing.EasingOption.Linear);animateX(1000,Easing.EasingOption.Linear);}private void initSetting() {/*xy轴设置*///x轴设置显示位置在底部mXAxis.setPosition(XAxis.XAxisPosition.BOTTOM);mXAxis.setGranularity(1f);//mXAxis.setCenterAxisLabels(true);mXAxis.setLabelCount(7);mXAxis.setTextSize(8f);//文字倾斜展示
//        mXAxis.setLabelRotationAngle(-60);//保证y轴从0开始 不然会上移一点mAxisLeft.setAxisMinimum(0f);mAxisRight.setAxisMinimum(0f);mAxisRight.enableGridDashedLine(10f,10f,10f);//不显示X轴 Y轴线条mXAxis.setDrawAxisLine(true);mXAxis.setDrawGridLines(false);mXAxis.setGridColor(Color.TRANSPARENT);//mAxisLeft.setDrawAxisLine(false);mAxisRight.setDrawAxisLine(false);mAxisLeft.setDrawGridLines(false);mAxisRight.setDrawGridLines(false);//不显示左侧Y轴mAxisRight.setEnabled(false);/*折现图例 标签 设置*/mLegend.setForm(Legend.LegendForm.LINE);mLegend.setTextSize(0f);//显示位置mLegend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);mLegend.setOrientation(Legend.LegendOrientation.HORIZONTAL);/*是否绘制在表里*/mLegend.setDrawInside(false);mLegend.setEnabled(false);//不显示右下角描述内容mDescription.setEnabled(false);setDescription(mDescription);}/*固定宽*/private void setChartData(int size){Matrix m = new Matrix();m.postScale(scaleNum(size), 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍getViewPortHandler().refresh(m, this, false);//将图表动画显示之前进行缩放}/* marker */public void setMarkerView(Context context) {markerView=new BChartMarkerView(context);setMarker(markerView);}//30个横坐标时，缩放4f是正好的。private float scalePercent = 3f/30f;private float scaleNum(int xCount){return xCount * scalePercent;}private int[] getColors() {int stacksize = 4;//有尽可能多的颜色每项堆栈值int[] colors = new int[stacksize];colors[0]=Color.rgb(28,28,28);colors[1]=Color.rgb(54,54,54);colors[2]=Color.rgb(79,79,79);colors[3]=Color.rgb(105,105,105);return colors;}public void setBarDataSet(int color, final List<BarEntry> list, String[] v) {BarDataSet barDataSet=new BarDataSet(list,"");barDataSet.setColors(getColors());barDataSet.setFormLineWidth(0f);barDataSet.setFormSize(0f);barDataSet.setDrawValues(false);BarData barData=new BarData(barDataSet);barData.setValueTextSize(10f);ValueFormatter xAxisFormatter = new DayAxisValueFormatter(v,DayAxisValueFormatter.DAY);mXAxis.setValueFormatter(xAxisFormatter);if (list.size()<6){barData.setBarWidth((float) list.size()/10f);setData(barData);}else {setData(barData);setChartData(list.size());}setChartEffect();initSetting();}}

有个base类是mpAndroidchart demo里的

package com.example.lmy.cardkt.chart;import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.BubbleEntry;
import com.github.mikephil.charting.data.CandleEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.data.RadarEntry;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.formatter.IValueFormatter;
import com.github.mikephil.charting.utils.ViewPortHandler;/*** Class to format all values before they are drawn as labels.*/
public abstract class ValueFormatter implements IAxisValueFormatter, IValueFormatter {/*** <b>DO NOT USE</b>, only for backwards compatibility and will be removed in future versions.** @param value the value to be formatted* @param axis  the axis the value belongs to* @return formatted string label*/@Override@Deprecatedpublic String getFormattedValue(float value, AxisBase axis) {return getFormattedValue(value);}/*** <b>DO NOT USE</b>, only for backwards compatibility and will be removed in future versions.* @param value           the value to be formatted* @param entry           the entry the value belongs to - in e.g. BarChart, this is of class BarEntry* @param dataSetIndex    the index of the DataSet the entry in focus belongs to* @param viewPortHandler provides information about the current chart state (scale, translation, ...)* @return formatted string label*/@Override@Deprecatedpublic String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {return getFormattedValue(value);}/*** Called when drawing any label, used to change numbers into formatted strings.** @param value float to be formatted* @return formatted string label*/public String getFormattedValue(float value) {return String.valueOf(value);}/*** Used to draw axis labels, calls {@link #getFormattedValue(float)} by default.** @param value float to be formatted* @param axis  axis being labeled* @return formatted string label*/public String getAxisLabel(float value, AxisBase axis) {return getFormattedValue(value);}/*** Used to draw bar labels, calls {@link #getFormattedValue(float)} by default.** @param barEntry bar being labeled* @return formatted string label*/public String getBarLabel(BarEntry barEntry) {return getFormattedValue(barEntry.getY());}/*** Used to draw stacked bar labels, calls {@link #getFormattedValue(float)} by default.** @param value        current value to be formatted* @param stackedEntry stacked entry being labeled, contains all Y values* @return formatted string label*/public String getBarStackedLabel(float value, BarEntry stackedEntry) {return getFormattedValue(value);}/*** Used to draw line and scatter labels, calls {@link #getFormattedValue(float)} by default.** @param entry point being labeled, contains X value* @return formatted string label*/public String getPointLabel(Entry entry) {return getFormattedValue(entry.getY());}/*** Used to draw pie value labels, calls {@link #getFormattedValue(float)} by default.** @param value    float to be formatted, may have been converted to percentage* @param pieEntry slice being labeled, contains original, non-percentage Y value* @return formatted string label*/public String getPieLabel(float value, PieEntry pieEntry) {return getFormattedValue(value);}/*** Used to draw radar value labels, calls {@link #getFormattedValue(float)} by default.** @param radarEntry entry being labeled* @return formatted string label*/public String getRadarLabel(RadarEntry radarEntry) {return getFormattedValue(radarEntry.getY());}/*** Used to draw bubble size labels, calls {@link #getFormattedValue(float)} by default.** @param bubbleEntry bubble being labeled, also contains X and Y values* @return formatted string label*/public String getBubbleLabel(BubbleEntry bubbleEntry) {return getFormattedValue(bubbleEntry.getSize());}/*** Used to draw high labels, calls {@link #getFormattedValue(float)} by default.** @param candleEntry candlestick being labeled* @return formatted string label*/public String getCandleLabel(CandleEntry candleEntry) {return getFormattedValue(candleEntry.getHigh());}}

然后是中文的文字展示，这是我用到的。根据自己的需求改

package com.example.lmy.cardkt.chart;/*** Created by li on 12/13/18.*/
public class DayAxisValueFormatter extends ValueFormatter
{public static final int DAY=0; //日public static final int PERCENT=1; //百分比private  String[] mMonths;private int type;public DayAxisValueFormatter(String[] mMonths,int type) {this.mMonths = mMonths;this.type=type;}@Overridepublic String getFormattedValue(float value) {String s="";int days = (int) value;switch (type){case DAY: s=mMonths[days];break;case PERCENT: s=mMonths[days]+"%";break;}return s;}
}

MarkerView就不放了，根据需求自己写吧

然后是重要的xml文件

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.example.lmy.cardkt.chart.MBarChartandroid:id="@+id/bar_chart"android:layout_width="match_parent"android:layout_height="300dp"></com.example.lmy.cardkt.chart.MBarChart><com.example.lmy.cardkt.chart.HorizontalBarChartViewandroid:id="@+id/hb_chart"android:layout_width="match_parent"android:layout_height="300dp"></com.example.lmy.cardkt.chart.HorizontalBarChartView><com.example.lmy.cardkt.chart.MultipleBarChartViewandroid:id="@+id/mb_chart"android:layout_width="match_parent"android:layout_height="600dp"></com.example.lmy.cardkt.chart.MultipleBarChartView></LinearLayout>
</ScrollView>

activity文件

package com.example.lmy.cardkt;import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;import com.example.lmy.cardkt.chart.HorizontalBarChartView;
import com.example.lmy.cardkt.chart.MBarChart;
import com.example.lmy.cardkt.chart.MultipleBarChartView;
import com.github.mikephil.charting.charts.HorizontalBarChart;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.listener.OnChartValueSelectedListener;import java.util.ArrayList;
import java.util.List;
import java.util.Random;public class MainActivity extends AppCompatActivity {private MBarChart barChart;private HorizontalBarChartView hBarChart;private MultipleBarChartView mbChart;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initBarChart();initHBarChart();initMBarChart();}private void initMBarChart() {mbChart=findViewById(R.id.mb_chart);List<BarEntry> list=new ArrayList<>();String[] values=new String[30];for (int i=0;i<30;i++){float mult = (50 + 1);float val1 = (float) (Math.random() * mult) + mult / 3;float val2 = (float) (Math.random() * mult) + mult / 3;float val3 = (float) (Math.random() * mult) + mult / 3;float val4 = (float) (Math.random() * mult) + mult / 3;list.add(new BarEntry(i, new float[]{val1, val2, val3,val4}));values[i]=i+"日";}mbChart.setBarDataSet(Color.BLACK,list,values);mbChart.setMarkerView(this);mbChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {@Overridepublic void onValueSelected(Entry e, Highlight h) {Log.d("TAG",e.getY()+"---" +h.getY());}@Overridepublic void onNothingSelected() {}});}private void initHBarChart() {hBarChart=findViewById(R.id.hb_chart);Random random=new Random();List<BarEntry> list=new ArrayList<>();String[] values=new String[30];for (int i=0;i<5;i++){BarEntry barEntry=null;if (i!=0&&i%2==0){barEntry=new BarEntry(i,i+random.nextInt(12)+80);}else {barEntry=new BarEntry(i,i+random.nextInt(12));}values[i]=(i+1)+"鄂尔多斯市";list.add(barEntry);}hBarChart.setBarDataSet(Color.BLACK,list.size(),list,values);}private void initBarChart() {barChart=findViewById(R.id.bar_chart);Random random=new Random();List<BarEntry> list=new ArrayList<>();String[] values=new String[30];for (int i=0;i<30;i++){BarEntry barEntry=new BarEntry(i,i+random.nextInt(12));values[i]=(i+1)+"鄂尔多斯市";list.add(barEntry);}barChart.setBarDataSet(Color.BLACK,list.size(),list,values);barChart.setMarkerView(this);}
}

这也算是给自己留个记录，省的以后再写柱状图忘记了。斜体中文不需要在更改源码了。我用的版本是3.0.3是不用改源码。

mpAndroidChart 柱状图一览（中文斜体，横向柱状图，叠层柱状图，固定宽度左右滑动）相关推荐

Java通过JfreeChart生成转Base64图片字符串（饼图、折线图、柱状图、折线图-多条、3D柱状图、气泡图、时序图、曲线图、区域图、分布图、联合分类图、双X轴图、K线图、柱状图-横向等图)
工具类 CreatLineChart.java package DrawLine;import java.awt.BasicStroke; import java.awt.Color; import ...
MPAndroidchart自定义样式二在柱状图上显示文本和间断式显示柱状图
内容描述 a .在柱状图上显示文本 b.间断式显示柱状图产品原型如下: 难点描述: MPAndroidChart 并不支持将文字描述信息展示到柱状图(条形图)上:而且也不支持不从0开始的柱状节点展示 ...
python 绘制柱状图-Python使用Plotly绘图工具，绘制柱状图
使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数通过参数,可以设置柱状图的样式. 通过barmod进行设置可以绘制出不同类型的柱状图出来. 我们先来实现一个简单 ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
《勇士传说》横版卷轴动作类游戏笔记-3.场景绘制和叠层设置
0.写在前面该笔记为M_Studio老师今年免费更新的面向初学者的教程的笔记,只会更新老师免费更新的部分,中文课堂独有的部分不会更新.教程中所有的演示均为付费版下的演示,观看免费版的小伙伴可能会出现 ...
导入网络表、叠层与阻抗、电路板布局
导入网络表叠层与阻抗电路板布局导入网络表 1.allegro方式网络表导入 2.netlist网络表解读和生成网络表 3.other方式网络表导入 4.库路径加载 1.allegro方式网络表导 ...
【MyAndroid】viewpage+cardView卡片叠层效果展示（2）--100个经典UI设计模板(98/100)
搞了大半个月凑合着叠层效果开源代码地址:https://gitee.com/lc951/my-android 这里使用的是viewpager + cardView组件.全部是原生组件几乎没有自定义组 ...

mpAndroidChart 柱状图一览（中文斜体，横向柱状图，叠层柱状图，固定宽度左右滑动）

效果图：

第一个普通柱状图

第二个横向柱状图

第三个叠层柱状图

mpAndroidChart 柱状图一览（中文斜体，横向柱状图，叠层柱状图，固定宽度左右滑动）相关推荐

最新文章

热门文章

mpAndroidChart 柱状图一览（中文斜体，横向柱状图，叠层柱状图，固定宽度左右滑动）

效果图：

第一个 普通柱状图

第二个 横向柱状图

第三个 叠层柱状图

mpAndroidChart 柱状图一览（中文斜体，横向柱状图，叠层柱状图，固定宽度左右滑动）相关推荐

最新文章

热门文章

第一个普通柱状图

第二个横向柱状图

第三个叠层柱状图