Android 根据时间戳用多种颜色填充圆环图

Question

我正在寻找一个图表，它会显示围绕那个时间的一个圆圈，比如 12:00，01:00 之类的。根据 activity 的时间填充一些颜色。我找到了 link ，但它不符合我的要求。

请在下面找到图片。这就是我对图表的期待。

这里这些颜色代表一些 activity 基于时间。我有一组带有时间戳的数据，它是 activity 类型。

谁能告诉我如何绘制这张图表？有这方面的例子吗？

编辑

我找到这个 link http://www.androidtrainee.com/draw-android-clock-pie-chart-with-animation/ 来绘制时钟饼图。但是像上图一样卡在点上设置宽度和填充颜色。现在它根据时间在整个圆圈中填充不同的颜色。但是我如何设置此时钟的宽度以填充颜色和中心部分空白以显示 08:40?

Answer 1

下面是 jQuery 扩展的列表： http://www.jquerybyexample.net/2014/02/jquery-html5-library-circular-piechart-graph.html

Answer 2

由于这些是非常具体的要求，您可能必须在 Android 上创建自己的 自定义视图。您链接的 SO 链接了一些有前途的库，包括 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 drawing a chart based on Path.arcTo 涵盖了所有需要的步骤。

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

关于更新的问题：我建议您创建自己的自定义视图。我最好的建议是继续将 ClockPieView.onDraw 与我提到的其他库的绘制方法进行比较，这些库确实绘制了一个带孔的圆环图。研究如何根据您的特定定位将文本呈现为 onDraw 的一部分。

Answer 3

您可以自定义饼图 MPAndroidChart library to create this. Here 是使用它创建的类似饼图。在这里您会发现 documentation of the library and 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();

Android 根据时间戳用多种颜色填充圆环图

Android donut chart fill with multiple colors based on timestamp

java

android

donut-chart

google-fit

编辑