DevExtreme 图表组件

让人想犯罪 __ 提交于 2020-11-14 07:46:57
1.第一步

引用DevExtreme CDN

第一步是添加 DevExtreme charting JavaScript文件到网站上,惊喜的发现DevExtreme居然有一个CDN(内容分发网络),提供了我需要的JavaScript文件。

1
<script type= "text/javascript"  src= "http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js" ></script>
2.第二步
 

创建图表,静态

    
$( "#gamesChartContainer" ).dxPieChart({
     dataSource: [
         {
             game:  "Test game 1" ,
             viewers: 50,
             channels: 1,
             image:  "test-game-1.jpg"
         },
         {
             game:  "Test game 1" ,
             viewers: 50,
             channels: 1,
             image:  "test-game-1.jpg"
         }
     ],
     series: [
         {
             argumentField:  "game" ,
             valueField:  "viewers" ,
             label: {
                 visible:  true ,
                 connector: {
                     visible:  true ,
                     width: 1
                 }
             }
         }
     ]
});
3.第三步
 

从Twitch.tv读取数据,动态

现在饼图可以显示静态数据了,要显示实时数据就要调用 Twitch.tv's REST API。这个API支持JSONP,所以可以使用jQuery从JavaScript中直接调用服务。
var  ds = [];
$.getJSON( "https://api.twitch.tv/kraken/games/top?callback=?" function  (json) {
  
     for  ( var  i = 0; i < json.top.length; i++) {
         ds.push({
             game: json.top[i].game.name,
             viewers: json.top[i].viewers,
             channels: json.top[i].channels,
             image: json.top[i].game.box.large
         });
     }
});
4.第四步
 

交互式图表

下面我将要创建一个面积图,用于展示一个视频游戏随着时间推移所增加的浏览数。图表开始的时候是没有任何数据的,但每个数秒中就会调用一次 Twitch API ,并返回浏览数量,同时动态更新面积图:

1
2
3
4
5
6
7
8
9
10
11
12
13
$( "#streamChartContainer" ).dxChart({
     title:  "Viewers" ,
     commonSeriesSettings: {
         type:  "splineArea" ,
         argumentField:  "date"
     },
     series: [
         { valueField:  "viewers" , name:  "Viewers"  }
     ],
     argumentAxis: { valueMarginsEnabled:  false  },
     legend: { visible:  false  },
     animation: { enabled:  false  }
});

注意在上面的代码中没有数据源,数据是从 Twitch API 中进行检索的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var  dataSource = [];
  
function  getStreamData() {
     $.getJSON( "https://api.twitch.tv/kraken/streams/"  + name +  "?callback=?" function  (json) {
  
         var  viewers = json.stream.viewers;
  
         dataSource.push({
             date:  new  Date(),
             viewers: viewers
         });
  
         $( '#streamChartContainer' ).dxChart( 'option' 'dataSource' , dataSource);
     });
}
  
setInterval( function  () {
     getStreamData();
}, 5000);

面积图:

DevExtreme,面积图,Viewers,动态图表

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!