可用

可用

关注
发信
关注(28)粉丝(399)

如何在Android的水平条形图中显示可用和不可用的插槽

本文介绍了如何在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 组件

将上述代码粘贴到活动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.30amend_time - 11.30amstatus - available

start_time - 11.30amend_time - 12.00pmstatus - available

start_time - 12.00pmend_time - 15.00pmstatus - 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

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的水平条形图中显示可用和不可用的插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-23 22:00
Powered by LMLPHP ©2024 可用 0.008624