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

面积图：

相关阅读:
Python中的下划线（转）
全面Python小抄（转）
Python函数参数默认值的陷阱和原理深究（转）
Python中的默认参数（转）
PEP8 Python 编码规范整理（Python）
PEP8中文翻译（转）
这次面试就差不多了，你有什么问题需要问我呢？（转）
MySQL事务隔离级别，锁（转）
Web安全学习图径——系列课程推荐
 盗墓笔记—阿里旺旺ActiveX控件imageMan.dll栈溢出漏洞研究
原文地址：https://www.cnblogs.com/baiyanjun/p/8979374.html