label mpchart 饼图_Android MPChart—饼图-Go语言中文社区

第三方资源库MPChart如何添加到项目中就不说了,不知道的网上搜一下,很多。

本篇主要说明MPChart中PieChart(饼图)是如何调用实现的。

一、布局文件

android:id="@+id/pieChart"

android:layout_height="match_parent"

android:layout_width="match_parent" />

二、PieChartActivity

6990be31c7b2f65b10680ccd0c2db413.gif

public class PieChartActivity extends AppCompatActivity {

private PieChart mChart;

private ArrayList entries = new ArrayList();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_pie_chart);

mChart = findViewById(R.id.pieChart);

setData();

}

private void setData() {

entries.clear();

entries.add(new PieEntry(10, "0-10"));

entries.add(new PieEntry(12, "10-20"));

entries.add(new PieEntry(17, "20-30"));

entries.add(new PieEntry(20, "30-40"));

entries.add(new PieEntry(22, "40-50"));

entries.add(new PieEntry(25, "50-60"));

mChart.setUsePercentValues(true); //设置是否显示数据实体(百分比,true:以下属性才有意义)

mChart.getDescription().setEnabled(false);

mChart.setExtraOffsets(5, 5, 5, 5);//饼形图上下左右边距

mChart.setDragDecelerationFrictionCoef(0.95f);//设置pieChart图表转动阻力摩擦系数[0,1]

//mChart.setCenterTextTypeface(mTfLight);//设置所有DataSet内数据实体(百分比)的文本字体样式

mChart.setCenterText("饼状图");//设置PieChart内部圆文字的内容

mChart.setDrawHoleEnabled(true);//是否显示PieChart内部圆环(true:下面属性才有意义)

mChart.setHoleColor(Color.WHITE);//设置PieChart内部圆的颜色

mChart.setTransparentCircleColor(Color.WHITE);//设置PieChart内部透明圆与内部圆间距(31f-28f)填充颜色

mChart.setTransparentCircleAlpha(110);//设置PieChart内部透明圆与内部圆间距(31f-28f)透明度[0~255]数值越小越透明

mChart.setHoleRadius(28f);//设置PieChart内部圆的半径(这里设置28.0f)

mChart.setTransparentCircleRadius(31f);//设置PieChart内部透明圆的半径(这里设置31.0f)

mChart.setDrawCenterText(true);//是否绘制PieChart内部中心文本(true:下面属性才有意义)

mChart.setRotationAngle(0);//设置pieChart图表起始角度

// enable rotation of the chart by touch

mChart.setRotationEnabled(true);//设置pieChart图表是否可以手动旋转

mChart.setHighlightPerTapEnabled(true);//设置piecahrt图表点击Item高亮是否可用

mChart.animateY(1400, Easing.EaseInOutQuad);

// mChart.spin(2000, 0, 360);

// 获取pieCahrt图列

Legend l = mChart.getLegend();

l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);

l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);

l.setOrientation(Legend.LegendOrientation.VERTICAL);

l.setDrawInside(false);

l.setXEntrySpace(7f); //设置图例实体之间延X轴的间距(setOrientation = HORIZONTAL有效)

l.setYEntrySpace(0f); //设置图例实体之间延Y轴的间距(setOrientation = VERTICAL 有效)

l.setYOffset(0f);//设置比例块Y轴偏移量

// entry label styling

mChart.setEntryLabelColor(Color.WHITE);//设置pieChart图表文本字体颜色

// mChart.setEntryLabelTypeface(mTfRegular);//设置pieChart图表文本字体样式

mChart.setEntryLabelTextSize(12f);//设置pieChart图表文本字体大小

PieDataSet dataSet = new PieDataSet(entries, "数据说明");

dataSet.setDrawIcons(false);

dataSet.setSliceSpace(3f);

dataSet.setIconsOffset(new MPPointF(0, 40));

dataSet.setSelectionShift(5f);

// add a lot of colors

ArrayList colors = new ArrayList();

for (int c : ColorTemplate.VORDIPLOM_COLORS)

colors.add(c);

for (int c : ColorTemplate.JOYFUL_COLORS)

colors.add(c);

for (int c : ColorTemplate.COLORFUL_COLORS)

colors.add(c);

for (int c : ColorTemplate.LIBERTY_COLORS)

colors.add(c);

for (int c : ColorTemplate.PASTEL_COLORS)

colors.add(c);

colors.add(ColorTemplate.getHoloBlue());

dataSet.setColors(colors);

//dataSet.setSelectionShift(0f);

PieData data = new PieData(dataSet);

data.setValueFormatter(new PercentFormatter());

data.setValueTextSize(11f);

data.setValueTextColor(Color.WHITE);

// data.setValueTypeface(mTfLight);

mChart.setData(data);

// undo all highlights

mChart.highlightValues(null);

mChart.invalidate();

}

}

至于里面PieChart的属性方法是什么意思,注释加了一些,另外的大家可以自行百度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 ECharts 中绘制饼图需要以下步骤: 1. 引入 ECharts 的 JavaScript 文件。 2. 在 HTML 中创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息,如标题、提示框等。 5. 配置饼图的数据和样式,如饼图的半径、颜色、标签等。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码中,我们使用 ECharts 的 `init` 方法初始化了一个图表,并使用 `setOption` 方法配置了饼图的基本信息和数据。其中,`series` 属性中的 `type` 属性指定了图表类型为饼图,`data` 属性指定了饼图的数据,`itemStyle` 属性指定了饼图的样式。 需要注意的是,上述代码中的 ECharts 版本为 5.1.2,如果你使用的是其他版本的 ECharts,可能会有些许差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值