Ext3 学习(6) -- Chart time

最新推荐文章于 2024-07-29 17:49:33 发布

Acc2013

最新推荐文章于 2024-07-29 17:49:33 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext3 文章标签： Chart

本文链接：https://blog.csdn.net/Acc2013/article/details/10475017

Ext3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用ExtJS创建以时间为X轴的数据图表，并详细展示了如何通过TimeAxis自定义时间显示格式，包括数据源配置及图表样式的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当时间作为图表的X轴时，可以用 TimeAxis 来自定义时间显示的格式，具体示例：

// 测试 以时间为坐标轴
var timeStore = new Ext.data.JsonStore({
	fields: [
		{
			name: "Date",
			mapping: "Date",
			type: "date",  // 与 convert 一致  
			//dateFormat: "Y-m"	//（与日期数据格式一致）默认当前day -- 只是显示的时候， 错位？？
			convert: function(value, record){
				return new Date(value);	//默认day:01
			}
		},
		"Count"
	],
	data:[
		{"Date": "2013-01", "Count": 12},
		{"Date": "2013-02", "Count": 44},
		{"Date": "2013-03", "Count": 13},
		{"Date": "2013-04", "Count": 25}
	]
});
// 图表
Ext.create({
    xtype: "panel",
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    items: [
    	{
    		xtype: "linechart",
    		store: timeStore,
    		xField: "Date",
    		yField: "Count",
    		//转换为时间格式
    		xAxis: new Ext.chart.TimeAxis({
    			// 定义起止日期 - 静态，
    			minimum: new Date("2013-01"),
    			maximum: new Date("2013-04"),
                //majorUnit: 2,
                //labelRenderer : Ext.util.Format.dateRenderer("m")  //只
                labelRenderer: function(value){
                   // var date = new Date(value);
                    return value.format("y-n");
                }
            }),
            chartStyle: {
                xAxis: {
                     // 显示网格线 
                    majorGridLines: {size: 1, color: 0x0000ff}
                }
            }
    	}
    ]
});