关闭

绘图和制图

502人阅读 评论(0) 收藏 举报

绘图和制图

本文件的目的是引导你通过绘图和图表包的整体设计和实施细节。绘图和图表包,使您可以创建跨浏览器和跨设备的图形,在一个通用的方式。

本文件的结构将涵盖三个主要议题:

  • 第一节:“画”一个多功能cross-browser/device包绘制通用的图形和动画。
  • 第二节:“图表”,一个高水平演示的图表包和类的组织如何。
  • 第三节:“”系列介绍可用的系列,其使用。

一档包

在图形团队有关图纸的设计选择,不只是contrained图表:我们需要一个多功能的工具,这将使我们创建自定义图形在cross-browser/device方式和丰富的动画也跟他们一起表演。

抽奖包包含面类,抽象底层图形的实施,使开发人员创建任意形精灵或SpriteGroups的,响应鼠标事件一样的互动,并提供所有属性,如形状,颜色,大小等丰富的动画

表面类的底层/具体实现SVG(为SVG的浏览器)和VML(Internet Explorer的家庭- <9)。表面可视为一个SVG和VML渲染引擎的接口。表面是不可知的底层实现。大多数的方法和途径来创建精灵大量的SVG标准的启发

创建绘图表面

没有加载图表包,您可以创建一个简单的绘图表面。这可能是有用的创建工作,对所有的浏览器/设备的任意图形,动画以及。例如,你可以创建一个美国的互动式地图,其中每个国家是一个精灵,或也infographic,其中每个元素也是一个精灵。精灵和图像是什么有趣的是,该文件获得一个新的互动水平,但也基于VML和SVG图像将永远失去质量,并可以打印正确。

为了直接使用绘图软件包,可以创建一个绘图组件(例如)追加到Ext.Window

VAR  drawComponent = 20070114创建“Ext.draw.Component,{
    Viewbox的假的
    项目:[{
        “圈”类型
        填写“#FFC' 
        半径100
        X100
        Y100
    }]
});
 
分机创建Ext.Window',{
    宽度230
    高度230
    布局“适合”
    项目:[ drawComponent ]
。})();
 

在这种情况下,我们创建了一个平局组件,并给它添加一个精灵。类型的精灵是圆的,所以如果你运行这段代码,你会看到一个窗口ISH黄圈。设置Viewbox的  false 时,我们是负责设置相应的对象的位置和尺寸。

“搜神记”可以有不同的类型。其中一些是:

  •  -绘制圆形。您可以通过使用设置半径半径精灵配置参数。
  • 矩形 -要呈现矩形。通过使用,你可以设置矩形的宽度和高度,宽度高度在精灵的配置参数。
  • 文本 -文本呈现为精灵。您可以设置使用的字体/字体大小字体的参数。
  • 路径 -最强大的精灵类型。有了它,你可以创建任意形状使用SVG路径语法在这里你可以找到如何获取路径语法开始快速教程

一个Sprite是在绘图表面呈现的对象。有不同的选择和类型的精灵。雪碧配置是一个具有以下属性的对象:

  • 类型 - (字符串)类型的精灵。可能的选项是“圆”,“路径”,“矩形”,“文本”,“广场”。
  • 宽度 - (号码)用于矩形精灵,矩形的宽度。
  • 高度 - (号码)用于矩形精灵,矩形的高度。
  • 大小 - (号码),使用方精灵平方米的维度。
  • 半径 -圈精灵(编号),圆的半径。
  • X - (号码)沿x轴的位置。
  • Y - (号码)沿y轴的位置。
  • 路径 - (阵列),在路径精灵,书面在SVG样的路径语法精灵的路径。
  • 混浊 - (数目)精灵的透明度。
  • 填写 - (字符串)填充颜色。
  • 中风 - (串)描边颜色。
  • 中风宽度 - (号码)中风的宽度。
  • 字体 - (字符串)用文本类型的精灵。完整的字体描述。使用相同的语法的CSS 字体的参数。
  • 文本 - (字符串)用文本类型的精灵。文字本身。

此外,还有3转换,可以设置对象setAttributes平移旋转和 缩放

对于翻译,配置对象包含X和Y属性的翻译。例如:

精灵setAttributes 
  翻译 { 
   X  10 
   Y  10 
  
} }  TRUE );

对于旋转,配置对象为中心旋转(可选),和度度旋转属性,指定包含X和Y属性。例如:

精灵setAttributes ({ 
  旋转 {  90 
  } 
}, TRUE );

配置对象的规模,包含X和Y属性为X轴和Y轴缩放。例如:

精灵setAttributes 
  规模 { 
   X  10 
   Y  3 
  } 
}, TRUE );

雪碧互动

现在,我们已经创造了它的精灵平局面,让我们深入如何与精灵。我们可以得到一个句柄,我们要修改精灵,精灵强制加入表面:

在这个例子中,我们已经看到了我们如何添加事件,设置精灵属性和动画抽奖包使用这些属性。正如你可以看到这个包是一个通用的抽象层以上的图形,我们可以做。有什么关于这个类中最有趣的是,我们是不依赖于特定的形状或结构的所有元素支持的事件,设置属性和创建动画。最重要的是,所有这一切都是在所有的浏览器和设备兼容。

二。图表

所以现在我们了解的抽奖包,让我们下潜到图表的表现力。图表包包含一个类定义图表容器(像一个表面的东西,但更具体处理图表)的层次结构;轴,图例,系列,标签标注,提示,直角坐标和径向坐标,具体像派系列,区,酒吧,等。

在本节中我们将介绍这些类是如何联系在一起,什么进入这些类的每一个功能位。我们不会覆盖每一个特定的系列,因为这是在下一节。

图表

图表类是主要的系列绘图表面。它管理的每个系列的渲染和如何绘制和定义轴。图表还代表鼠标事件,不同地区的图像系列,轴等图表类扩展绘制组件。

图表实例访问:

  • 轴-通过访问chart.axes所有的轴被定义为这个可视化绘制。这是一个混合收集。
  • 系列-通过访问chart.series绘制图表的所有系列。这可能是线,棒材,分散等,这也是一个混合收集。
  • 传说 - 传说框对象和它的图例项。

图表实例支持权之前和期间的可视化渲染,可以自定义事件触发。我们可以通过添加这些事件的处理程序:

图表( { 
  '刷新'  函数() { 
    警报'(重新)绘制图表“ ); 
  
} } );

图表也像代表事件itemmousedownitemmouseup系列,使我们可以追加听众对这些对象,并获得该事件的目标精灵。

传说

图表配置对象接受一个传奇的参数,以便为每个系列的图例项和传说中的位置设置。这些选项将被传递到图表的构造。例如:

图表=  分机创建“Ext.chart.Chart'  { 
    宽度 200 
    高度 200 

    / /设置一个传奇
    的传说 { 
        位置 '左' 
    },

    / /定义轴 [ / *设置一个轴配置* / ]

    / /定义系列
    系列 [ / *集系列配置* / ] 
});

每个系列的对象需要,有showInLegend参数设置为true 为了传说中的名单。

包包含一个抽象类,延长径向代表一个直角的轴,径向采用极坐标代表如饼图和雷达系列的极地基于可视化的信息。我们正在努力为代表的数据类型绑定到轴。有分类信息(称为轴的分类轴)和轴数字像定量信息基于时间的信息,我们的时间轴线,使我们超过一个特定的时间内呈现的信息,更新期间,流畅的动画。如果你想知道更多关于每个轴,请去轴包的文档。此外,你会发现配置轴例子,在底部的系列例子。

轴包含部门和分支机构,代表主要和次要刻度值。这些都可以自动或手动调整一些指定的时间间隔,最高和最低值。配置选项的最大值最小值majorTickSteps和 minorTickSteps数值轴用来改变配置和安置的主要和次要刻度。例如,通过使用:

 [{ 
            类型 “数字” 
            位置 “左” 
            字段 [ 'DATA1' ],
            标题 “点击次数
            最小 0 
            / /一个小两大滴答滴答
            minorTickSteps的 1 
        }, { 
            类型 “类别” 
            位置 '底部' 
            字段 [ '名称' ],
            标题 “一年中的月份' 
        }]

以下配置会产生轻微的刻度线系列轴左:

系列图片

梯度

绘图和图表包创建线性渐变。在图表的配置对象可以被定义的梯度,梯度配置的阵列。对于每个梯度配置以下参数指定:

  • ID -字符串-梯度独特的名称。
  •  -数字,可选-度梯度的角度。
  •  -对象-一种用数字键(从0到100)和样式对象作为值对象。

每个键代表在站对象上指定的颜色为渐变填充的百分比。

例如:

    gradients: [{
        id: 'gradientId',
        angle: 45,
        stops: {
            0: {
                color: '#555'
            },
            100: {
                color: '#ddd'
            }
        }
    },  {
        id: 'gradientId2',
        angle: 0,
        stops: {
            0: {
                color: '#590'
            },
            20: {
                color: '#599'
            },
            100: {
                color: '#ddd'
            }
        }
    }]

你可以申请一个渐变的一个精灵,设置渐变填充属性的id引用这是通过一个URL语法参考。例如:

    精灵setAttributes ({ 
        填写 'URL(#gradientId),“ 
    }, TRUE );

系列

系列是一个抽象类,具体的可视化,如延长 线分散系列类包含共同所有这些系列的代码,类似的事件处理,动画处理,阴影,渐变,共同抵消等系列类提供了一套加强混入提供类似功能,高亮,标注,提示,等A 系列将包含一个项目,每个项目包含对每个元素的定位,其相关信息雪碧storeItem阵列该系列产品还分享更新系列所有职位,然后呈现一系列drawSeries方法。

主题化

图表配置对象可能有一个主题,一个字符串值,它引用一个内置的主题名称的属性。

图表=  分机创建“Ext.chart.Chart  
    主题 “蓝” 
    / *其他选项... * / 
});

主题定义的形状,颜色,字体,轴和图表的背景风格。主题化的配置,可以是非常丰富和复杂:

{  { 
        填充 '#000' 
        '中风宽度'  1 
    },
    axisLabelTop  { 
        填写 '#000' 
        字体 '11px宋体
    },
    axisLabelLeft  { 
        填写 '#000' 
        字体 '11px宋体
    },
    axisLabelRight  { 
        填写 '#000' 
        字体 '11px宋体' 
    },
    axisLabelBottom  { 
        填写 '#000' 
        字体 '11px宋体' 
    },
    axisTitleTop  { 
        填写 #000 
        字体 '11px宋体“ 
    },
    axisTitleLeft  {  '#000' 
        字体 '11px宋体“ 
    }, { 
        填写 '#000' 
        字体 '11px宋体
    },
    axisTitleBottom  { 
        填写 '#000' 
        字体 '11px宋体' 
    },
    系列 { 
        '中风'  1 
    },
    seriesLabel  { 
        字体 '12px 
         
      
      
      
      
      
      
       
       
       
    

我们也可以创建一个颜色,这将是整个主题的基础,只是简单的数组创建一个配置对象,如颜色的种子:

{ 
  颜色 [ 'AAA'  '#BCD'  '#EEE' ] 
}

当设置一个基本的颜色主题会产生一系列的颜色相匹配的基本颜色:

{ 
  baseColor  '#BCE 
}

您可以创建自定义主题,从基本主题延伸。例如,创建一个自定义的花式主题,我们可以做的:

VAR 颜色=  '#555' 
              '#666' 
              '#777' 
              '#888' 
              '#999' ];

baseColor =  '#EEE' ;

分机定义'Ext.chart.theme.Fancy'  { 
    延长 'Ext.chart.theme.Base“

    constructor: function(config) {
        this.callParent([Ext.apply({
            axis: {
                fill: baseColor,
                stroke: baseColor
            },
            axisLabelLeft: {
                fill: baseColor
            },
            axisLabelBottom: {
                fill: baseColor
            },
            axisTitleLeft: {
                fill: baseColor
            },
            axisTitleBottom: {
                fill: baseColor
            },
            colors: colors
        }, config)]);
    }
});

图表=  分机创建Ext.chart.Chart“  
    主题 “花式”

    / *这里的其他选项... * / 
});

第三。系列

下面的部分将通过我们提供的系列/可视化,介绍他们每个人,并显示一个完整的系列配置的例子。例如将包括图表, 系列的配置选项。

创建一个堆积面积图。堆积面积图显示多种信息聚合层时非常有用。与所有其他系列,区系列必须追加的系列图阵列配置。

系列图片

一个典型的配置领域的一系列对象可以是:

var chart = Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    animate: true,
    store: store,
    legend: {
        position: 'bottom'
    },

    / /添加数字和分类 ​​轴 [{ 
        类型 “数字” 
        网格 真正
        的位置是 '左' 
        字段 [ 'DATA1'  'data2的“  “data3” ],
        标题 '数      
                 
            
          
         
        电网 真正的
        标签 { 
            旋转 {  315 
            } 
        
    } } ]

    / /添加“区域”          
        
    

酒吧

创建一个条形图。条形图是一个有用的可视化技术,以显示不同的类别,可以显示在数据集的一些进展(或回归)的定量信息。与所有其他系列,酒吧系列必须追加的系列图阵列配置。更多信息,请参阅图表文件。

系列图片

酒吧系列的一个典型的配置对象可以是:

            点击' 
    }, { 
        类型 “类别” 
        的位置是 '左' 
        字段 [ '名称' ],
        标题 “一年中的月份' 
    }],
    / /添加酒吧            
            
        
    

线

创建了一个折线图。折线图是一个有用的可视化技术,以显示不同类别或其他实际值(条形图反对)的定量信息,可以显示一些数据集(或回归)的进展。与所有其他系列,线条系列,必须附加在一系列图表阵列配置。更多信息,请参阅图表文件。

系列图片

可能是一个典型的配置对象的行系列:

                点击' 
    }, { 
        类型 “类别” 
        的位置是 '底部' 
        字段 [ '名称' ],
        标题 “新年月
    }],

    / /添加两行         
             
        
              
             
        
    

标记配置对象包含用于创建一个Sprite相同的属性。你可以找到用于创建一个在雪碧节以上的雪碧的属性。

馅饼

创建一个饼图。饼图是一个有用的可视化技术,定量的信息显示为不同的类别,也有作为一个整体的意义。与所有其他系列,馅饼系列,必须附加在一系列图表阵列配置。更多信息,请参阅图表文件。可能是一个典型的配置对象的馅饼系列:

系列图片

可能是一个典型的配置对象的馅饼系列:

         
             
          
             宋体' 
        
    } } 
});

雷达

创建一个雷达图。雷达图是一个有用的可视化技术,比较不同的类别限制数量的定量值。与所有其他系列,雷达系列,必须附加在一系列图表阵列配置。更多信息,请参阅图表文件。

系列图片

雷达系列中的一个典型的配置对象可以是:

var chart = Ext.create('Ext.chart.Chart', {
    width: 800,
    height: 600,
    animate: true,
    store: store,
    renderTo: Ext.getBody(),
    insetPadding: 20,
    theme: 'Category2',
    axes: [{
        type: 'Radial',
        position: 'radial',
        label: {
            display: true
        }
    }],

    / /添加两个系列        
         
              
        
           
         
              
        
    

分散

创建一个散点图。当试图在相同的可视化显示两个以上的变量散点图是有用的。这些变量可以映射到X,Y坐标和/元素的半径大小,颜色等与所有其他系列,分散系列必须在追加的系列图阵列配置。创建图表的更多信息,请参阅图表文件。

系列图片

可能是一个典型的配置对象分散系列:

             
         
            
         
           
         
           
    

估计

创建一个计图。计图表,用于显示在一个特定的变量的进展。有两种方式使用计图。一个是设置到仪表商店元素,并选择从该商店使用的领域。另一个实例化,可视化和使用setValue方法来调整你想要的值。

系列图片

一个压力表的可视化图表/系列配置可能看起来像这样:

{
    xtype: 'chart',
    store: store,
    axes: [{
        type: 'gauge',
        position: 'gauge',
        minimum: 0,
        maximum: 100,
        steps: 10,
        margin: -10
    }],
    series: [{
        type: 'gauge',
        field: 'data1',
        donut: false,
        colorSet: ['#F49D10', '#ddd']
    }]
}

在此配置中,我们要使用规范可视化(描述了半圈标记)创建一个特殊的计轴,也是我们设置成轴的最大值,最小值和步骤的配置选项。压力表系列配置中包含的存储领域,势必要使用可视化可视化显示和颜色设置。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91329次
    • 积分:1196
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:7篇
    • 译文:22篇
    • 评论:1条
    文章分类
    文章存档