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. Go函数篇

    1 定义格式 函数构成代码执行的逻辑结构.在Go语言中,函数的基本组成为:关键字func.函数名.参数列表.返回值.函数体和返回语句. Go 语言函数定义格式如下: func FuncName(/*参 ...

  2. mybatis中集成sharing-jdbc采坑

    1. mybatis中集成sharing-jdbc采坑 1.1. 错误信息 Caused by: org.apache.ibatis.binding.BindingException: Invalid ...

  3. 无线安全审计工具FruityWifi初体验

    FruityWIfi是一款有名的无线安全审计的开源工具,其灵感来自于wifipineapple,目前该工具已经更新到2.4.它能够让用户通过web界面来控制和管理模块,十分方便.FriutyWifi最 ...

  4. Excel 使用VBA或宏----简单笔记

    一.一种纯粹的录制宏.(未使用此方法,如有兴趣可自学),就是Excel提供了“所见即所得”的方式生成宏.把自己想要的操作记录,录制成宏. 自学网等各种网站有教学视频或文章 二.常用VBA语法及函数笔记 ...

  5. Django框架（七）-- 模板层：模板导入、模板继承、静态文件

    一.模板导入 要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可 在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div clas ...

  6. eclipse 离线安装activiti

    1. 下载activiti离线安装包, activiti-designer-1.8.zip 2. 将上图4个jar包放在eclipse的features文件夹中 3. 打开eclipse-->H ...

  7. 团队第五次作业：alpha2成绩汇总

    一.作业题目 团队第五次作业:alpha2发布 二.作业评分标准 博客评分规则(总分100)博客要求 给出开头和团队成员列表(10') 给出发布地址以及安装手册(20') 给出测试报告(40') 给出 ...

  8. wordpress后台添加左侧边栏菜单如何操作

    我们有时为了方便操作会把一些特定的链接添加到wordpress后台左侧菜单栏中,这个要如何实现呢?其实不会很难,使用两个WordPress内置函数就可以解决问题,分别是add_menu_page()和 ...

  9. 09-C#笔记-循环

    1. while 同 C++ 2. for 同 C++ 3. foreach,注意数组的定义 int[] fibarray = new int[] { 0, 1, 1, 2, 3, 5, 8, 13 ...

  10. js冒泡排序，快速排序，插入排序

     //冒泡排序 function sortBubble(array){   var len=array.length,i,j,tmp;   for(i=len-1;i>=1;i--){     ...