如何在Android的水平条形图中显示可用和不可用的插槽 [英] How to display available and unavailable slots in a horizontal bar graph in android

问题描述

我正在尝试在水平条形图中显示可用和不可用的插槽，但是无法找到解决方案.来自服务器的值就像-

开始时间-上午9.30结束时间-上午11.30状态-可用

开始时间-上午11.30结束时间-下午12.00状态-可用

开始时间-下午12.00结束时间-下午15.00状态-不可用

以此类推...直到21:00 pm

所以我必须在单个水平条上用绿色表示可用的插槽，而在灰色的水平栏中用灰色表示不可用的插槽.目前，我使用的是MP Chart android的水平条形图，但没有给我想要的结果.>

这是我想要实现的目标的图像.这正是我想要实现的目标

请帮助我.

谢谢.

这是我正在使用的代码-

int StockColors [] = new int [] {Color.parseColor(#24E224")，Color.parseColor(#A9A9A9"));

  ArrayList< BarEntry>条目=新的ArrayList<>();entry.add(new BarEntry(0f，arr));BarDataSet bardataset =新的BarDataSet(entries，"));bardataset.setColors(StockColors);bardataset.setDrawValues(false);stockChart.getAxisRight().setCenterAxisLabels(true);BarData数据=新的BarData(bardataset);data.setBarWidth(5f);图例图例= stockChart.getLegend();LegendEntry legendentry1 =新的LegendEntry();legendentry1.label =可用插槽"；legendentry1.formColor = Color.GREEN;LegendEntry legendentry2 =新的LegendEntry();legendentry2.label =不可用的插槽"；legendentry2.formColor = Color.GRAY;legend.setCustom(Arrays.asList(legendentry1，legendentry2));stockChart.setExtraBottomOffset(20f);stockChart.getLegend().setXEntrySpace(30f);stockChart.getLegend().setYEntrySpace(20f);stockChart.getAxisRight().setDrawGridLines(false);stockChart.getAxisRight().setDrawAxisLine(false);stockChart.getAxisRight().setGranularity(1f);stockChart.setViewPortOffsets(0f，0f，0f，0f);stockChart.setExtraOffsets(0f，0f，0f，0f);stockChart.getAxisLeft().setEnabled(false);//在左侧显示y轴stockChart.getAxisRight().setEnabled(true);//在右侧隐藏y轴stockChart.setScaleEnabled(false);stockChart.getAxisRight().setEnabled(true);stockChart.getXAxis().setEnabled(false);stockChart.getXAxis().setDrawAxisLine(false);stockChart.setData(data);stockChart.getAxisRight().setTextColor(Color.WHITE);stockChart.getXAxis().setTextColor(Color.WHITE);stockChart.getLegend().setTextColor(Color.WHITE);stockChart.getDescription().setEnabled(false);stockChart.setFitBars(false);stockChart.setTouchEnabled(true);stockChart.setDrawGridBackground(false);stockChart.setDrawBarShadow(false);stockChart.setDrawValueAboveBar(false);stockChart.invalidate();xvalues = new ArrayList<>();xvalues.add("9.00");xvalues.add("10.00");xvalues.add("11.00"))；xvalues.add("12.00"))；xvalues.add("13.00&");xvalues.add("14.00&");xvalues.add("15.00"))；xvalues.add("16.00"))；xvalues.add("17.00&"))；xvalues.add("18.00");xvalues.add("19.00"))；xvalues.add("20.00"))；xvalues.add("21.00"))；stockChart.getAxisRight().setLabelCount(xvalues.size()+ 3，true);//如果我在这里使用entrys.size()，那么只有很少的标签是可见的stockChart.getAxisRight().setDrawLabels(true); 

stockChart.getAxisRight().setValueFormatter(new newBarChartXaxisFormatter());

 公共类newBarChartXaxisFormatter实现IAxisValueFormatter{@SuppressLint("StringFormatInvalid")@Overridepublic String getFormattedValue(浮点值，AxisBase轴){int a =(int)(10f +值);//如果我使用9f，则它以7开头返回String.valueOf(a);}} 

解决方案

实现以上图形的正确方法是使用MpAndroidChart的堆叠条形图和 Horizo​​ntalBarChart 组件

注意:我将把项目与上图所示的示例输出链接起来.检查链接的注释部分.运行 Horizo​​ntalStackedBarGraph.kt 活动以尝试解决方案.对下面编写的代码进行了注释，以使您了解如何在项目中实现它.

将上述代码粘贴到活动XML

 < com.github.mikephil.charting.charts.Horizo​​ntalBarChartandroid:id ="@@ id/timetable_barchart"android:layout_marginBottom =" 40dp"android:layout_width =" match_parent"android:layout_height =" match_parent"/> 

---

  class Horizo​​ntalStackedBarGraph:AppCompatActivity(){val startTime = 9fval EXTRA_GRAPH_SIZE = 3//在水平图中，条形宽度将设置您的图形高度.VAL BAR_WIDTH = 0.3F//计算时间间隔并创建一个数组val条目= floatArrayOf(2f，1f，3f，3f，1f，2f)重写fun onCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_horizo​​ntal_stacked_bar_graph)val barChart = findViewById< BarChart>(R.id.timetable_barchart);//将值列表添加到单个BarEntryval timeTableEntries = BarEntry(0f，条目)val set1 = BarDataSet(listOf(timeTableEntries)，"TimeTable")set1.setColors(intArrayOf(R.color.colorAvailableSlot，R.color.colorUnAvailableSlot)，此)set1.setDrawValues(false)val barData = BarData(set1)barData.barWidth = BAR_WIDTHbarChart.data = barDatabarChart.description.isEnabled =否val legend1 = LegendEntry().apply {formColor = ContextCompat.getColor(this @ Horizo​​ntalStackedBarGraph，R.color.colorAvailableSlot)标签=不可用的插槽"}val legend2 = LegendEntry().apply {formColor = ContextCompat.getColor(this @ Horizo​​ntalStackedBarGraph，R.color.colorUnAvailableSlot)标签=可用插槽"；}val valueFormatterForTime = object:ValueFormatter(){重写fun getFormattedValue(value:Float):字符串{返回getString(R.string.time，(startTime + value).toInt())}}//条形图定制barChart.extraBottomOffset = 20fbarChart.legend.xEntrySpace = 10fbarChart.legend.setCustom(arrayListOf(legend1，legend2))barChart.axisRight.apply {setDrawGridLines(false)粒度= 1fvalueFormatter = valueFormatterForTimelabelCount = entry.size + EXTRA_GRAPH_SIZE}barChart.axisLeft.isEnabled =否barChart.xAxis.isEnabled =否barChart.xAxis.axisMinimum = 0fbarChart.setDrawGridBackground(false)barChart.setDrawBarShadow(false)barChart.setDrawValueAboveBar(false)barChart.invalidate()}} 

I am trying to display the available and unavailable slots on a horizontal bar graph, but not able to find a solution to that. The values coming from server are like -

start_time - 9.30am end_time - 11.30am status - available

start_time - 11.30am end_time - 12.00pm status - available

start_time - 12.00pm end_time - 15.00pm status - not available

and so on...till 21.00pm

so i have to represent the available slots with green color and unavailable slots with grey color on a single horizontal bar .Presently i am using horizontal bar graph of MP Chart android but it is not giving me the desired result.

Here is the image of what i want to achieve. This is exactly what i want to achieve

Please help me with this.

Thanks in advance.

Here is the code i am using -

int StockColors[] = new int[]{Color.parseColor("#24E224"), Color.parseColor("#A9A9A9")};

                    ArrayList<BarEntry> entries = new ArrayList<>();
                    entries.add(new BarEntry(0f, arr));
                    BarDataSet bardataset = new BarDataSet(entries, "");
                    bardataset.setColors(StockColors);
                    bardataset.setDrawValues(false);
                    stockChart.getAxisRight().setCenterAxisLabels(true);
                    BarData data = new BarData(bardataset);
                    data.setBarWidth(5f);

                    Legend legend = stockChart.getLegend();

                    LegendEntry legendentry1 = new LegendEntry();
                    legendentry1.label = "Available Slot";
                    legendentry1.formColor = Color.GREEN;

                    LegendEntry legendentry2 = new LegendEntry();
                    legendentry2.label = "UnAvailable Slot";
                    legendentry2.formColor = Color.GRAY;

                    legend.setCustom(Arrays.asList(legendentry1, legendentry2));

                    stockChart.setExtraBottomOffset(20f);
                    stockChart.getLegend().setXEntrySpace(30f);
                    stockChart.getLegend().setYEntrySpace(20f);
                    stockChart.getAxisRight().setDrawGridLines(false);
                    stockChart.getAxisRight().setDrawAxisLine(false);
                    stockChart.getAxisRight().setGranularity(1f);

                    stockChart.setViewPortOffsets(0f, 0f, 0f, 0f);
                    stockChart.setExtraOffsets(0f, 0f, 0f, 0f);

                    stockChart.getAxisLeft().setEnabled(false); //show y-axis at left
                    stockChart.getAxisRight().setEnabled(true); //hide y-axis at right

                    stockChart.setScaleEnabled(false);
                    stockChart.getAxisRight().setEnabled(true);
                    stockChart.getXAxis().setEnabled(false);
                    stockChart.getXAxis().setDrawAxisLine(false);

                    stockChart.setData(data);
                    stockChart.getAxisRight().setTextColor(Color.WHITE);
                    stockChart.getXAxis().setTextColor(Color.WHITE);
                    stockChart.getLegend().setTextColor(Color.WHITE);

                    stockChart.getDescription().setEnabled(false);
                    stockChart.setFitBars(false);
                    stockChart.setTouchEnabled(true);

                    stockChart.setDrawGridBackground(false);
                    stockChart.setDrawBarShadow(false);
                    stockChart.setDrawValueAboveBar(false);
                    stockChart.invalidate();

                    xvalues = new ArrayList<>();
                    xvalues.add("9.00");
                    xvalues.add("10.00");
                    xvalues.add("11.00");
                    xvalues.add("12.00");
                    xvalues.add("13.00");
                    xvalues.add("14.00");
                    xvalues.add("15.00");
                    xvalues.add("16.00");
                    xvalues.add("17.00");
                    xvalues.add("18.00");
                    xvalues.add("19.00");
                    xvalues.add("20.00");
                    xvalues.add("21.00");

                    stockChart.getAxisRight().setLabelCount(xvalues.size()+3, true); // also if i use entries.size() here, then only few labels are visible
                    stockChart.getAxisRight().setDrawLabels(true);

stockChart.getAxisRight().setValueFormatter(new newBarChartXaxisFormatter());

public class newBarChartXaxisFormatter implements IAxisValueFormatter
    {
        @SuppressLint("StringFormatInvalid")
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            int a = (int) (10f + value); // if i use 9f then it starts with 7
            return String.valueOf(a);
        }
    }

解决方案

The correct way of achieving the above graph is using Stacked Bar graph and HorizontalBarChart component of MpAndroidChart

Note: I will be linking the project with the sample output shown in the above diagram. Check the comments section for the link. Run HorizontalStackedBarGraph.kt activity to try the solution. The code written below is commented to give you an idea as to how you can implement it in your project.

Paste the above code in your activity XML

<com.github.mikephil.charting.charts.HorizontalBarChart
    android:id="@+id/timetable_barchart"
    android:layout_marginBottom="40dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

---

class HorizontalStackedBarGraph : AppCompatActivity() {

val startTime = 9f
val EXTRA_GRAPH_SIZE = 3
// In Horizontal graph Bar width will set your graph height.
val BAR_WIDTH = 0.3F
// Calculate the time interval and create an array
val entries = floatArrayOf(2f, 1f, 3f, 3f, 1f, 2f) 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_horizontal_stacked_bar_graph)

    val barChart = findViewById<BarChart>(R.id.timetable_barchart);
    
    // Add the list of values to a single BarEntry
    val timeTableEntries = BarEntry(0f, entries)
    val set1 = BarDataSet(listOf(timeTableEntries), "TimeTable")
    set1.setColors(intArrayOf(R.color.colorAvailableSlot, R.color.colorUnAvailableSlot), this)
    set1.setDrawValues(false)
    val barData = BarData(set1)
    barData.barWidth = BAR_WIDTH
    barChart.data = barData
    barChart.description.isEnabled = false
    
    val legend1= LegendEntry().apply {
        formColor = ContextCompat.getColor(this@HorizontalStackedBarGraph, R.color.colorAvailableSlot)
        label = "Unavailable Slot"
    }
    
    val legend2= LegendEntry().apply {
        formColor = ContextCompat.getColor(this@HorizontalStackedBarGraph, R.color.colorUnAvailableSlot)
        label = "Available Slot"
    }

    val valueFormatterForTime = object : ValueFormatter() {
        override fun getFormattedValue(value: Float): String {
            return getString(R.string.time, (startTime + value).toInt())
        }
    }

    //Bar graph customization
    barChart.extraBottomOffset = 20f
    barChart.legend.xEntrySpace = 10f
    barChart.legend.setCustom(arrayListOf(legend1, legend2))
    barChart.axisRight.apply {
        setDrawGridLines(false)
        granularity = 1f
        valueFormatter = valueFormatterForTime
        labelCount = entries.size + EXTRA_GRAPH_SIZE
    }
    barChart.axisLeft.isEnabled = false
    barChart.xAxis.isEnabled = false
    barChart.xAxis.axisMinimum = 0f
    barChart.setDrawGridBackground(false)
    barChart.setDrawBarShadow(false)
    barChart.setDrawValueAboveBar(false)
    barChart.invalidate()
    }
}

这篇关于如何在Android的水平条形图中显示可用和不可用的插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！