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

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, 8628, 41832, 68376, 296, 10114, 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);

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