代码之家 › 专栏 › 技术社区 › Ajay

Android甜甜圈图表根据时间戳填充多种颜色

donut-chart google-fit android java

Ajay · 技术社区 · 6 年前

我正在寻找一个图表,它会显示一个圆圈,就像 12: 00,01:00 喜欢它会根据活动时间填充一些颜色。我找到了这个链接 Create Doughnut Chart Similar to Google Fit 但它不符合我的要求。

请查看下面的图片。这就是我所期待的图表。

在这里,这些颜色表示一些基于计时。我有一组带有时间戳的数据及其活动类型。

有谁能建议我怎么画这个图表吗?这方面有什么例子吗?

编辑

我找到了这个链接 http://www.androidtrainee.com/draw-android-clock-pie-chart-with-animation/ 绘制时钟饼图视图。但在设置宽度和填充颜色时,如上图所示。现在,它是根据整圈中的时间填充不同的颜色。但我如何设置时钟的宽度以填充颜色,如何设置中间部分的空白以显示 08:40 ?

3 回复 | 直到 6 年前

ColdFire 6 年前

由于这些都是非常具体的要求,您可能需要创建自己的 自定义视图 在Android上。SO you linked有几个很有前途的链接库,包括 fit-chart 。文档不是很好,但它似乎支持以1%的步长添加具有值的图表部分。

因此,您只需将持续时间数据转换为循环的百分比,即使用60分钟或12小时作为100%。

以下是fit chart的相关用法部分:

Collection<FitChartValue> values = new ArrayList<>();
values.add(new FitChartValue(30f, 0x2d4302)); // 30f seems to represent 30%
final FitChart fitChart = (FitChart)findViewById(R.id.fitChart);
fitChart.setValues(values);

另一个看起来很有希望的图书馆是 MPAndroidChart 支持详细的饼图。

关于考虑时间:有很多关于如何绘制模拟时钟的教程,其中应该包括如何在圆圈周围定位文本的计算。这里有一个 SO creating a CustomClock View 链接了多个教程。

关于设置自定义视图, this 2d-donut-chart tutorial 基于绘制图表 Path.arcTo 涵盖所有需要的步骤。

如果您需要进一步的帮助,请添加您的数据结构和您已经尝试过的内容。但我希望通过这些库和教程,您可以创建所需的视图。

关于更新的问题: 我建议您创建自己的自定义视图。我最好的建议是继续比较 ClockPieView.onDraw 使用我提到的其他库的绘制方法,可以绘制带孔的圆环图。研究如何使用特定的定位将文本作为onDraw的一部分进行渲染。

AdrianL 6 年前

下面是要执行此操作的jQuery扩展列表: http://www.jquerybyexample.net/2014/02/jquery-html5-library-circular-piechart-graph.html

-1

Sreehari Radhakrishnan 6 年前

您可以自定义的饼图 MPAndroidChart 库来创建此。 Here 是使用它创建的类似对象。在这里,您可以找到 documentation 图书馆和 this 演示应用程序也很有用。

下面是一个示例代码,您可以在将MPAndroid图表库添加到项目中后试用。

List<PieEntry> entries = new ArrayList<>();
//add data entries, 100 will be considered as a full circle
entries.add(new PieEntry(50, ""));
entries.add(new PieEntry(25, ""));
entries.add(new PieEntry(25, ""));
PieDataSet pieDataSet = new PieDataSet(entries, "");
PieChart pieChart1 = (PieChart)rootView.findViewById(R.id.pie_chart1); 
pieChart.setMaxAngle(360); 
//You can customize the pie chart in many ways to suit your need
pieChart.setCenterTextRadiusPercent(84);
pieChart.setRotationEnabled(false);
pieChart.setRotationAngle(180);
pieChart.setHoleRadius(60f);
pieChart.setDescription(null);
pieChart.setHoleColor(ContextCompat
    .getColor(context,R.color.colorTransparent));
pieChart.setBackgroundColor(ContextCompat.getColor(context, 
    R.color.colorTransparent));
pieChart.setTouchEnabled(false)           
pieChart.setDrawCenterText(true);
pieChart.setCenterTextColor(Color.BLACK);
pieChart.setCenterTextSize(16f);
pieChart.setCenterText(status);  
//Add animation (optional)
pieChart.animateY(1500);
pieChart.invalidate();