DevExtreme 图表组件

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,
                     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 ，并返回浏览数量，同时动态更新面积图：

$("#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 中进行检索的。

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);

面积图：