绘图和制图

绘图和制图

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

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

• 第一节：“画”一个多功能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

        X：100，

        Y：100

    }]

}）;

分机。创建（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 ）;

雪碧互动

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

  

  

  

/ /创建一个平局组件

VAR  drawComponent = 20070114。创建（“Ext.draw.Component，{

    Viewbox的：假

}）;

/ /创建一个窗口放置在绘制组件

分机。创建（Ext.Window'，{

    宽度：220，

    高度：230，

    布局：“适合”，

    项目：[ drawComponent ]

。}）秀（）;

/ /添加一个圆形的精灵

VAR  myCircle = drawComponent 表面。添加（{

    “圈”，类型：

    X：100，

    Y：100，

    半径：100

    填写：'＃CC5'

}）;

/ /现在做的东西与精灵一样，改变它的属性：

myCircle。setAttributes（{

    填写：“＃CCC”

}，真实）;

/ /或动画精灵的属性

myCircle。动画（{

    到：

        填写：'＃555'

    }，

    持续时间：2000

}）;

/ /添加的mouseup监听精灵

myCircle。addListener（“的mouseup' ，函数（）{

    警报（“鼠标调升！”）;

}）;

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

二。图表

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

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

图表

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

图表实例访问：

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

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

图表（ { 
  '刷新' ： 函数（） { 
    警报（'（重新）绘制图表“ ）; 
  
} } ）;

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

传说

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

图表=  分机创建（“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 系列是一个抽象类，具体的可视化，如延长 线或分散。系列类包含共同所有这些系列的代码，类似的事件处理，动画处理，阴影，渐变，共同抵消等系列类提供了一套加强混入提供类似功能，高亮，标注，提示，等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']
    }]
}

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