关于web图表制作的方法有很多种，大家可以去网上这里我就介绍我经常使用的一种方法CanvasJS，这也是一款非常容易掌握并且好用的一种方法。

首先可以去网上下载canvasjs.js插件。下载路径：http://canvasjs.com/assets/script/canvasjs.min.js

1：关于折线图制作方法：

前台代码如下：

 <script type="text/javascript">

window.onload=function(){

    var play=new CanvasJS.Chart('play1',{

        title:{

            text:'Line Chart'

        },

        axisX:{

            interval: 10

        },

        data:[{

            type:'line',

            dataPoints:[{

                x:10,y:10

            },

                { x: 20, y: 14 },

                { x: 30, y: 20 },

                { x: 40, y: 60 },

                { x: 50, y: 50 },

                { x: 60, y: 80 },

                { x: 70, y: 40 },

                { x: 80, y: 60 },

                { x: 90, y: 10 },

                { x: 100, y: 50 },

                { x: 110, y: 40 },

                { x: 120, y: 14 },

                { x: 130, y: 70 },

                { x: 140, y: 40 },

                { x: 150, y: 90 },

            ]

        }]

    });

    play.render();

}

    </script>

<script src="../../canvasjs.min.js"></script>

</head>

<body>

<div id="play1" style="width: 500px;height: 500px;;">

</div>

效果图如下：

web前段canvasjs图表制作一的更多相关文章

  1. JQuery WEB前段开发

    JQuery WEB前段开发 Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, S ...

  2. silverlight visifire控件图表制作——silverlight 后台方法页面事件

    1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...

  3. Android 工程师如何快速学会web前段

    Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...

  4. ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明

    原文:ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 By 李远祥 ArcGIS Por ...

  5. silverlight visifire控件图表制作——silverlight 后台方法ControlChart.xaml.cs

    一.构造方法ControlChart 1.前台页面控件赋值 //时间下拉框赋值,下拉框赋选定值                for (int ii = DateTime.Today.Year; ii ...

  6. 【转】Django 图表制作（By Highcharts）

    马克,待不时之需 Django 图表制作(By Highcharts):https://blog.csdn.net/Temanm/article/details/54141759 免费而优秀的图表JS ...

  7. 最近一直是web前段，没什么意思，所以就不发资料了

    最近一直是web前段,没什么意思,所以就不发资料了 版权声明:本文为博主原创文章,未经博主允许不得转载.

  8. ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲

    ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 1.  网页绘制图表 Googl ...

  9. 个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签

    2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...

随机推荐

  1. 001.AD域控简介及使用

    一 AD概述 1.1 AD简介 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系. 当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可 ...

  2. java自定义序列化

    自定义序列化 1.问题引出 在某些情况下,我们可能不想对于一个对象的所有field进行序列化,例如我们银行信息中的设计账户信息的field,我们不需要进行序列化,或者有些field本省就没有实现Ser ...

  3. <C#任务导引教程>练习七

    //55,类的声明示例using System;class Date{    public int year;    public int month;    public int day;    p ...

  4. [hdu7082]Pty loves lcm

    先将问题差分,即仅考虑上限$R$(和$L-1$) 注意到$f(x,y)$增长是较快的,对其分类讨论: 1.若$y\ge x+2$,此时满足$f(x,y)\le 10^{18}$的$(x,y)$只有约$ ...

  5. [luogu4747]Intrinsic Interval

    有一个结论,答案一定是所有包含其合法区间中$l$最大且$r$最小的 证明比较容易,考虑两个合法区间有交,那么交必然合法,同时交也必然包含该区间,因此这个区间一定是合法的(取$l$最大的和$r$最小的两 ...

  6. 🏆【Alibaba中间件技术系列】「RocketMQ技术专题」让我们一起探索一下DefaultMQPushConsumer的实现原理及源码分析

    RocketMQ的前提回顾 RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆 ...

  7. 『学了就忘』Linux用户管理 — 51、用户管理相关命令

    目录 1.添加用户(useradd命令) 2.设定密码(passwd命令) 3.用户信息修改(usermod命令) 4.删除用户(userdel命令) 5.切换用户身份(su命令) 1.添加用户(us ...

  8. 将vue文档下载到本地预览

    1下载:https://github.com/vuejs/cn.vuejs.org   到本地 2. npm install npm start # 开发服务器地址为 http://localhost ...

  9. idea中解决整合SSM加载不到dataSource；

    idea在搭建maven的ssm项目中注入dataSource报错解决方案: 在整合ssm时候,发现 dataSource加载不到,并报错:解决办法为:file–>project structu ...

  10. 基于Docker搭建Maven私服Nexus，Nexus详解

    备注:首先在linux环境安装Java环境和Docker,私服需要的服务器性能和硬盘存储要高一点,内存不足可能到时启动失败,这里以4核8GLinux服务器做演示 一:基于Docker安装nexus3 ...