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. Vue项目运行或打包时，频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

    前端使用基于vue的Nuxt框架,但是随着项目功能增多,项目变大,频繁出现此种情况,原因是项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 解决方案 1.全局安装increase-memor ...

  2. 设计模式之（十四）责任链模式（Chain of Responsibility）

    在业务场景中,有很多是需要审批的.审核方式还可能常常发生变化,而责任链模式就是为了解决这种场景的情况的. 责任链模式定义:十多个对象都有机会处理请求,从而避免发送者和接受者之间的耦合关系.讲这些对象连 ...

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

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

  4. 《Android开发艺术探索》读书笔记之IntentFillter的匹配规则

    使用intent启动不同组件的方法 组件类型 启动方法 Activity startActivity(Intent intent) startActivityForResult(Intent inte ...

  5. Java中的equals与==

    package demo; public class Test { public static void main(String[] args) { String str1 = new String( ...

  6. 苹果电脑Mac系统如何安装Adobe Flash Player

    一)安装/更新Adobe Flash Player 开系统偏好设置 , Flash player  更新,立即检查/立刻安装: Flash插件官方每月常规更新1~2次,为避免频繁过期,建议设置为允许A ...

  7. eclipse设置序列化忽略生成serialVersionUID警告

    java中的类想要序列化必须实现java.io.Serializable接口,一般实现接口都会用警告信息,提示生成serialVersionUID,虽然我觉得这个应该生成才合理.这里还是记录一下取消生 ...

  8. docker 网络模式 和 端口映射

    docker 的 网络模式 docker 自带 3 种 网络模式:分别是bridge网络,host网络,none网络,可以使用  docker network ls  命令查看. 1.none网络 这 ...

  9. Collaborative Spatioitemporal Feature Learning for Video Action Recognition

    Collaborative Spatioitemporal Feature Learning for Video Action Recognition 摘要 时空特征提取在视频动作识别中是一个非常重要 ...

  10. Graph Embedding总结

    图嵌入应用场景:可用于推荐,节点分类,链接预测(link prediction),可视化等场景 一.考虑网络结构 1.DeepWalk (KDD 2014) (1)简介 DeepWalk = Rand ...