Chart.js 一款简单干净的图表工具，基于html5 的Javascript。

可以用来制做条形，扇形，折线，混合等等的强大工具

图表要放在html 的  cancas  标签中

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

制作sin  cos 折线图

准备一个盒子用来放这个图

引入chart.js，

链接：https://pan.baidu.com/s/1HSU1O6R-aczin5XrfoDpnA
提取码：72mx
也可以在  https://www.chartjs.org/   学习使用

具体实现

sin 与 cos  有个顺口留

123，321，39 二十七，弦是2 ，切是3 ，分子根号不能删

js 代码：

重要：

不同的图形对应着不同的类型，通过type:'中间的参数来进行控制'

line 表示折线统计图，bar  表示条形统计图，pie 表示扇形统计图

 主要就是设置  X  轴的参数

设置线对应的值，以及对线的格式进行设置

可以看到制作好后

代码，拷贝后可以直接进行使用查看

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>折线图</title>

    <script  src="http://www.obge.top/js/chartjs/2.8.0/chart.min.js">

    </script>

</head>

<body>

    <!-- 宽度为600px  并且居中盒子 -->

    <div style="width: 600px;margin: 0px auto">

        <!--在画布上做图表-->

        <canvas id="myChart">

        </canvas>

    </div>

        <script>

            //获取 id 为 myChart 这个对象 的 2d上下文

            var chartjs = document.getElementById('myChart').getContext('2d');

            //基于 chartjs   Chart对象传递参数

            var myChart = new Chart(chartjs,{

                //type:"line"  表示一个线性图表。如果要是柱状图，将line 换成 bar

                type : 'line',

                //data 表示提供要显示的数据

                data:{

                    //labels 表示图表  X 轴下方的文字

                    labels:['0','π/2','π','3π/2','2π','5π/2'],

                    //datasets 表示数据集合。这里数据集合里只有一个数据，如果是多个数据在图表中就会显示多条线

                    datasets:[{

                        //lable 表示这组数据的名称

                        label:'sin图',

                        //data 具体数据     对应在Y 轴的位置

                        data:[0,1,0,-1,0,1],

                        //borderColor线条颜色

                        borderColor:'red',

                        //borderWidth   线条宽度

                        borderWidth:1,

                        //borderDash: [5，5] 用于表示虚线。 [5，5] 分别表示虚线的长度和距离。

                        borderDash:[5,5],

                        //  fill: false 不进行填充     折线包括的部分使用阴影

                        fill:false,

                    },

                            //多条线依次增加

                        {

                            label:"cos图",

                            data:[1,0,-1,0,1,0],

                            borderColor:"blue",

                            borderWidth:1,

                            fill:true,

                        }

                    ]

                },

                //options  其他选项

                options:{

                    //tooltips   鼠标移动到图标的时候提示信息

                    tooltips:{

                        //intersect: false   鼠标不放在数据点的时候，也会提示信息

                        intersect:false,

                        // model  显示模式

                        mode:'index'

                    }

                }

            });

        </script>

</body>

</html>

Chartjs 简单使用 ------ 制作sin cos 折线图的更多相关文章

  1. JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

  2. C#中Chart的简单使用（柱状图和折线图）

    首先创建一个windows窗体应用程序,在工具箱—>数据中拖拽一个Chart控件,设置ChartArea背景色为黄色,Legend背景色为绿色,三个Series,Name属性分别为1,2,3,添 ...

  3. Echarts 简单报表系列二：折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Android开发学习之路-自定义控件（天气趋势折线图）

    之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...

  5. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. Microsoft Excel Sheet/表格 制作折线图

    Microsoft Excel Sheet/表格 制作折线图 虽然比较简单,但是仍然需要稍微花一点功夫. 1.制作好表格数据 2.先将数据选定(不包括 横座标的 年月日或其他的刻度 的那一列) 3.插 ...

  7. Python制作折线图

    利用python的第三方包Pygal制作简单的折线图. 申明:本文仅供学习交流使用.源码大部分来自<python编程从入门到实践>:如有侵权,请联系我删除. 1 #!usr/bin/env ...

  8. 又快又好！巧用ChartJS打造你的实用折线图

    又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...

  9. JFreeChart在制作折线图

    JFreeChart在制作折线图的时候可以使用两种不同的方式 package Line; import java.awt.Color; import java.awt.Font; import org ...

随机推荐

  1. DjangoDRF之视图总结

    思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/DRF%E6%A8%A1%E5%9D%97%E4%B9%8B%E8%A7%86%E ...

  2. 网页百度地图api，支持位置偏移

    网页百度地图api,支持位置偏移 需加载 jq <style type="text/css"> #allmap {width:100%; height:100%; bo ...

  3. 网络编程（四）--基于udp协议的套接字、socketserver模块

    一.UDP协议(数据报协议) 1.何为udp协议 不可靠传输,”报头”部分一共只有8个字节,总长度不超过65,535字节,正好放进一个IP数据包. 以太网头 ip头                  ...

  4. centos6升级gcc版本

    初始版本: 下面是CentOS6.6将gcc升级至4.8.2的过程: 安装仓库: #安装仓库 wget http://people.centos.org/tru/devtools-2/devtools ...

  5. nginx性能调优关键功能

     1. expires缓存时间优化作用:通过在服务器上设置合理的expires缓存时间.适合缓存的类型:静态文件:html,图片,js,css,xml都是缓存对象.优点:能够让用户不必每次访问都要重新 ...

  6. 使用SpringBoot编写Restful风格接口

    一.简介    Restful是一种对url进行规范的编码风格,通常一个网址对应一个资源,访问形式类似http://xxx.com/xx/{id}/{id}. 举个栗子,当我们在某购物网站上买手机时会 ...

  7. 201871010106-丁宣元 《2019面向对象程序设计（java）课程学习进度条》

    <2019面向对象程序设计(java)课程学习进度条> 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序阅读或编程任务 1 25/10 ...

  8. Python 模块B

    包 ​ 包可以把一个模块分成多个文件同样的导入方式即可,用了包之后导入方式不变,使用者感觉不到变化.包其实是一个文件夹(必须得含有__init__.py 这个文件) ​ 导包就是导入init ​ 包的 ...

  9. python基础之九：文件操作

    1.绝对路径与相对路径 path1 = "D:\orders.txt" # 绝对路径:包含根地址的路径 path2 = "homework.py" # 相对路径 ...

  10. CSS布局对齐的小技巧

    类似以上这种对齐怎么做? 很简单,上面是的污水开始的位置是由于被"能源种类"顶着,下面没有字怎么办?最差的办法就是用margin-left,因为在不同的机器上,可能会出现兼容性问题 ...