3.3 绘制曲线
如何通过HTML5绘制曲线呢？可以百度搜索chart.js查看各类曲线绘制方法。此处我们介绍百度开源程序echarts绘制曲线。打开网页http://echarts.baidu.com/examples/#chart-type-line，找到折线图，我们开始一起学习：
点击进去，发现源码较少，只有十几行：
数据比较简单，我们绘制一个复杂的曲线例如sin(x)/x，看看曲线走势，首先定义两个数组存储坐标值。
var xData = [];
var yData = [];
然后循环赋值x和y的坐标值：
for (var i = 0; i <= 720; i++) {
var x=(i-360)/2/Math.PI;
var y=Math.sin(x)/x;
xData.push(x);
yData.push(y);
}数据准备好后，修改如下配置里面的参数：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};修改后变为：
option = {
xAxis: {
type: 'category',
data: xData,
},
yAxis: {
type: 'value'
},
series: [{
data: yData,
type: 'line'
}]
};结果如下，有没有被惊艳到：
最后，祭出所有代码：
1. <!DOCTYPE html>
2. <html style="height: 100%">
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body style="height: 100%;margin: 0">
7. <div id="container"style="height:100%"></div>
8. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
9. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
10. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
11. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
12. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
13. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
14. <script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
15. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
16. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
17. <script type="text/javascript">
18. var dom= document.getElementById("container");
19. varmyChart = echarts.init(dom);
20. var app= {};
21. option= null;
22. varxData = [];
23. varyData = [];
24. for(var i = 0; i <= 720; i++) {
25. varx=(i-360)/2/Math.PI;
26. vary=Math.sin(x)/x;
27. xData.push(x);
28. yData.push(y);
29. }
30. option= {
31. xAxis:{
32. type:'category',
33. data:xData,
34. },
35. yAxis:{
36. type:'value'
37. },
38. series:[{
39. data:yData,
40. type:'line'
41. }]
42. };
43. ;
44. if(option && typeof option === "object") {
45. myChart.setOption(option,true);
46. }
47. </script>
48. </body>
49. </html>一张局部大图：
是不是比C语言好玩多了，HTML5的优势渐渐凸现。
原来曲线绘制这么简单。好了可以尝试下其它类型的曲线了，比如光滑曲线等...
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读