原創(chuàng)|使用教程|編輯:郝浩|2013-04-11 10:54:58.000|閱讀 960 次
概述:在今天來看一下,如何在DXTREM中為創(chuàng)建一個(gè)圖表組件,并為圖表提供值。在本文中將會(huì)提供具體的步驟和源碼。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
在今天來看一下,如何在DXTREME ENTERPRISE中為創(chuàng)建一個(gè)圖表組件,并為圖表提供值。
為了創(chuàng)建一個(gè)圖表組件,在這里將會(huì)使用Knockout Approach,所以使用以下的代碼在HTML窗口中:
<div id="chartContainer" style="height:100%" data-bind="dxChart: chartOptions"> </div>
運(yùn)行代碼將會(huì)得到一個(gè)簡(jiǎn)單的空的圖表組件,所以需要給這個(gè)圖表組件指定數(shù)據(jù)。
為了定義圖表系列可以用的數(shù)據(jù)源,將會(huì)在配置對(duì)象中指定數(shù)據(jù)源屬性,在下面的代碼中,將會(huì)有一組數(shù)據(jù)對(duì)象被設(shè)置成數(shù)據(jù)源。
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 }, //... ] }
現(xiàn)在用指定數(shù)據(jù)源的數(shù)據(jù)來定義圖表系列,所以我們將會(huì)使用到以下的系類屬性:
用于識(shí)別系列。
指定字段的數(shù)據(jù)源,提供一系列點(diǎn)的參數(shù)。
指定字段的數(shù)據(jù)源,提供一系列點(diǎn)的值。
下面來看一下如何使用這些屬性:
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對(duì)象來指定選項(xiàng),這個(gè)在圖表系列中時(shí)比較常見的。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件