如何通过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的优势渐渐凸现。
原来曲线绘制这么简单。好了可以尝试下其它类型的曲线了,比如光滑曲线等...
本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!