html能画折线图吗

使用原生js自己写或js库（框架）都是可以的，由于目前HTML5并不是所有的浏览器都完美支持，使用兼容性比较好的js库是个不错的选择。        例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、三D图、柱状图等等。具体使用参考：中国至美.hcharts中国/demo/index.php。         Highcharts中做折线图的demo代码可以作为参考：   javascript" src="中国cdn.hcharts中国/jquery/jquery-一.吧.三.min.js">  javascript" src="中国cdn.hcharts中国/highcharts/highcharts.js">  javascript" src="中国cdn.hcharts中国/highcharts/exporting.js">      </html

类似方法如下所示：

比如读取的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、保存和运行上述代码，得到学生的数学成绩条形图，得到学生的英语成绩条形图（得到学生的物理成绩折线图

我们经常使用Echarts制作各种图表，那么如何运用Echarts制作标准折线图呢？下面我给大家演示一下。

01

首先打开Sublime Text软件，新建一个HTML文档，并在文档中添加如下图所示的HTML结构

02

接下来运用scripts标签在HTML中引入echarts的库文件，如下图所示

03

然后我们在body标签中创建一个div区域用来存放折线图，如下图所示，注意给div设置高度

04

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化，如下图所示

05

然后我们设置折线图的参数，包括X，Y坐标轴数据，折线图标题等信息，如下图所示

06

接下来在series参数中设置折线图所需要的数据，如下图所示，一条折线配置一个大括号

07

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域，如下图所示

08

最后我们运行HTML文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

---