彩票走势图

DevExtreme中文教程:如何创建图表 并为图表提供值

原创|使用教程|编辑:郝浩|2013-04-11 10:54:58.000|阅读 891 次

概述:在今天来看一下,如何在DXTREM中为创建一个图表组件,并为图表提供值。在本文中将会提供具体的步骤和源码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

    在今天来看一下,如何在DXTREME ENTERPRISE中为创建一个图表组件,并为图表提供值。

    为了创建一个图表组件,在这里将会使用Knockout Approach,所以使用以下的代码在HTML窗口中:

<div id="chartContainer" style="height:100%" data-bind="dxChart: chartOptions">
</div>

&nbsp;   运行代码将会得到一个简单的空的图表组件,所以需要给这个图表组件指定数据。

 &nbsp;&nbsp; 为了定义图表系列可以用的数据源,将会在配置对象中指定数据源属性,在下面的代码中,将会有一组数据对象被设置成数据源。

chartOptions = {
   dataSource: [ 
   {
        year:1950, Africa:227939046, Americas:331, Asia:1436, Europe:547, Oceania:12
   },
   {
        year:1960, Africa:285, Americas:416, Asia:1718, Europe:605, Oceania:15
   },
  //... 
  ] 
}

现在用指定数据源的数据来定义图表系列,所以我们将会使用到以下的系类属性:

•name

用于识别系列。

•argumentField

指定字段的数据源,提供一系列点的参数。

•valueField

指定字段的数据源,提供一系列点的值。

下面来看一下如何使用这些属性:

chartOptions = {  
    //... 
    commonSeriesSettings: { 
         argumentField: 'year' 
    }, 
    series: [
    { 
        name: 'Oceania', valueField: 'Oceania' 
    },
    {
        name: 'Africa', valueField: 'Africa' 
    },
    { 
        name: 'Americas', valueField: 'Americas'
    },
    { 
        name: 'Asia', valueField: 'Asia' 
    },
    { 
        name: 'Europe', valueField: 'Europe' 
    }] 
}

在上面的代码中,使用了commonSeriesSettings对象来指定选项,这个在图表系列中时比较常见的。


标签:DevExpressHTML5

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP