你的位置:首页 > ASP.net教程

[ASP.net教程].Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现条形图的展示


最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

一、目标样式

目标样式

我们要实现上图中的效果,需要如下的操作:

1.从工具栏上的”Smobiler Components”拖动一个BarChart控件到窗体界面上

smobiler

2.修改BarChart的属性

a.DefaultColors属性

打开集合编辑器,并点击添加,如图1、图2

smobilersmobiler
图1图2

b.Load事件(添加数据)

VB:  Private Sub TestChart_Load(sender As Object, e As EventArgs) Handles MyBase.Load    Dim matTable As New DataTable    matTable.Columns.Add("XMember", GetType(String))    matTable.Columns.Add("YMember", GetType(Integer))    For i As Integer = 1 To 12 Step 1      Dim row As DataRow = matTable.NewRow      row("XMember") = i.ToString + "月"      row("YMember") = 0      matTable.Rows.Add(row)     Next    matTable.Rows(7)("YMember") = 20000    matTable.Rows(8)("YMember") = 300000    matTable.Rows(9)("YMember") = 150000    matTable.Rows(10)("YMember") = 40000    Me.BarChart2.DataSource = matTable    Me.BarChart2.DataBind()  End Sub
C#:  private void TestChart1_Load(object sender, EventArgs e)  {    DataTable matTable = new DataTable();    matTable.Columns.Add("XMember", typeof(string));    matTable.Columns.Add("YMember", typeof(int));    for (int i = 1; i <= 12; i += 1)    {      DataRow row = matTable.NewRow();      row["XMember"] = i.ToString() + "月";      row["YMember"] = 0;      matTable.Rows.Add(row);    }    matTable.Rows[7]["YMember"] = 20000;    matTable.Rows[8]["YMember"] = 300000;    matTable.Rows[9]["YMember"] = 150000;    matTable.Rows[10]["YMember"] = 40000;    this.BarChart2.DataSource = matTable;    this.BarChart2.DataBind();    }  }

c.XAxisLabelMember属性

绑定X轴的值,如图3

d.YAxisLabelMember属性

绑定Y轴的值,如图4

smobilersmobiler
图3图4

二、手机效果显示

smobiler