比如读取的EXCEL数据：学生的考试成绩。读取EXCEL数据并绘制条形图和折线图：
1、启动MATLAB，输入如下代码，用xlsread( )读取学生考试成绩的数据。
close allclear allclc
% 首先读取EXCEL中的数据
shuxue = xlsread('学生的考试成绩.xlsx','Sheet1','B2:B5')
yingyu = xlsread('学生的考试成绩.xlsx','Sheet1','C2:C5')
wuli = xlsread('学生的考试成绩.xlsx','Sheet1','D2:D5')
2、保存和运行上述，在工作区可以看到，学生的数学、英语、物理成绩已经被成功读取。
3、进行绘图，用条形图(垂直)绘制学生的数学成绩，用条形图(水平)绘制学生的英语成绩，用折线图绘制学生的物理成绩。接着输入如下代码：
% 第一,用条形图(垂直)绘制学生的数学成绩
figure('Name','数学成绩')
bar(1:4,shuxue,0.5,'r')
set(gca,'FontSize',15,'XTick',[1:1:4])
set(gca,'XTickLabel',{'张三','李四','王五','杨六'})
% 第二,用条形图(水平)绘制学生的英语成绩
figure('Name','英语成绩')
barh(1:4,yingyu,0.5,'g')
set(gca,'FontSize',15,'YTick',[1:1:4])
set(gca,'YTickLabel',{'张三','李四','王五','杨六'})
% 第三,用折线图绘制学生的物理成绩
figure('Name','物理成绩')
plot(1:4,wuli,'b-','LineWidth',3)hold on
plot(1:4,wuli,'y.','MarkerSize',15)hold off
ylim([0,100])
set(gca,'FontSize',15,'XTick',[1:1:4])
set(gca,'XTickLabel',{'张三','李四','王五','杨六'})
4、保存和运行上述代码，得到学生的数学成绩条形图，得到学生的英语成绩条形图（得到学生的物理成绩折线图
使用原生js自己写或js库（框架）都是可以的，由于目前HTML5并不是所有的浏览器都完美支持，使用兼容性比较好的js库是个不错的选择。
例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、3D图、柱状图等等。具体使用参考：http://www.hcharts.cn/demo/index.php。
Highcharts中做折线图的demo代码可以作为参考：
<html lang="en"><head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
tooltip: {
enabled: false,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
})
})
</script>
</head>
<body>
<div id="container" style="min-width:700pxheight:400px"></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）