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. linux 忘记mysql用户root密码 解决方案

    1.vim /etc/my.cnf[mysqld]skip-grant-tables ##追加此行,跳过权限表, 2.重启mysqlsystemctl restart mysqld 3.mysql 登 ...

  2. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  3. VUE--v-on修饰符

    1.v-on的修饰符 .stop:阻止事件冒泡 <div @click="getTitle"> 阿Q <button @click="getBut&qu ...

  4. loadrunner 基本操作

    1.录制(录制选项) 2.回放(运行时设置) 3.添加事物 4.参数化 5.内容检查 6.添加集合点 1.在脚本中添加集合点函数如下: lr_rendezvous("集合点") / ...

  5. 【爬虫】网页抓包工具--Fiddler--Request和Response

    [爬虫]网页抓包工具--Fiddler Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888, ...

  6. windows docker 安装 Kitematic

    在已经安装好docker for windows的基础上, 右键docker任务栏小图标, 选择Kitematic 然后放在docker的安装目录中C:\Program Files\Docker: 文 ...

  7. Python Django Vue 项目创建

    环境安装忽略,可参考前面个篇幅介绍 1.创建项目 打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject ...

  8. VSCode在Ubuntu下快捷键和Ｗindows下不一致的解决办法

    Windows下切换前一次和后一次光标位置,用的快捷键是Alt+<-和Alt+->.很遗憾,Ubuntu下并不是这个快捷键.不清楚为什么VSCode不提供统一的快捷键,但对于我来说,我很想 ...

  9. NetScaler的常用配置

    CITRIX NETSCALER常用功能有:LB,CS,GSLB,SSL LB实现的功能是服务器负载均衡,CS实现基于七层(域名,IP等)的负载均衡,GSLB实现的功能是全局负载均衡,SSL实现的功能 ...

  10. 使用cookiecutter创建django项目

    使用cookiecutter创建django项目 下载安装: pip install cookiecutter cookiecutter https://github.com/pydanny/cook ...