加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

GXT之旅:第九章:Charts图表——BarChart(2)

发布时间:2020-12-15 18:48:48 所属栏目:百科 来源:网络整理
导读:ChartModel class chartModel extends BaseModel,为 "Open Flash Chart" chart 的数据源所用。ChartModuel 用来定义类型和数据,他会包含一个or多个ChartConfig对象用来定义各种类型的Chart。 ChartConfig class ChartConfig extends BaseModel 但是一个抽

ChartModel class

chartModel extends BaseModel,为 "Open Flash Chart" chart 的数据源所用。ChartModuel 用来定义类型和数据,他会包含一个or多个ChartConfig对象用来定义各种类型的Chart。

ChartConfig class

ChartConfig extends BaseModel 但是一个抽象类。他作为一个基类,为其子类服务。其子类则定义了具体的Chart类型,并且提供一个层级关系的各类型的chart style

下面的图表,显示了不同类型的Chart之间关系,但是他们都 extends ChartConfig


BarChart class

我们首先了解的是BarChart。以最简单的形式,我们来使用她,会有如下步骤:

  • 新建一个createChartModelData()方法
  • 在方法内,新建ChartModel
  • 新建BarChart ChartConfig
  • 给BarChart加入一些values
  • 将BarChart加入到ChartModel
  • 方法最后返回的是ChartModel

private ChartModel createChartModel() {

ChartModel chartModel = new ChartModel();
BarChart chartConfig = new BarChart();
chartConfig.addValues(6936,8628,41832,68376,296,10114,4693);
chartModel.addChartConfig(chartConfig);
return chartModel;

}



但是现在的问题是,我们给予的values太大了远远超过Y轴,那么我们重新整理一下。新建一个getChartModel()方法

??? private ChartModel getChartModel() {
?? ??? ?ChartModel chartModel = new ChartModel(
?? ??? ??? ??? ?"Population of Western European Countries in 1950 (000's)",?? ??? ??? ??? ?"fontsize:14px;color:#000000");//标题
?? ??? ?chartModel.setBackgroundColour("#ffffff");
?? ??? ?
?? ??? ?XAxis xAxis = new XAxis();//x轴
?? ??? ?xAxis.addLabels("Austria","Belgium","France","Germany",?? ??? ??? ??? ?"Luxembourg","Netherlands","Switzerland");
?? ??? ?chartModel.setXAxis(xAxis);
?? ??? ?
?? ??? ?YAxis yAxis = new YAxis();//y轴
?? ??? ?yAxis.setRange(0,70000,10000);
?? ??? ?chartModel.setYAxis(yAxis);

?? ??? ?BarChart chartConfig = new BarChart();
?? ??? ?chartConfig.addValues(6936,4693);
?? ??? ?chartModel.addChartConfig(chartConfig);
?? ??? ?
?? ??? ?return chartModel;
?? ?}



  • 通过ChartModel构造函数传入标题,并且指定了标题的css。
  • 设置背景颜色
  • 设置X轴的显示标签
  • 设置Y轴的显示标签

经过这一番折腾之后,chart看起来满意多了。将鼠标放置在显示条上,会有实际的值显示出来。


默认的BarChart显示的效果就是如上图了,我们可以通过BarStyle提供的参数传入到BarChart构造函数里。

BarChart chartConfig = new BarChart(BarStyle.THREED); //立体显示



BarChart chartConfig = new BarChart(BarStyle.GLASS);

这些仅仅是个开始,我们以一种最简单的使用方式了解他们。其实我也了解的不多,哈哈

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读