关于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. 使用Adobe Acrobat进行Word转PDF遇到的问题及解决方法

    软件版本:Adobe Acrobat 9 Pro 使用场景:Word转PDF 问题1: 我以为先要在Adobe Acrobat 9 Pro中打开Word文件,然后在执行类似转换/导出操作.但是始终无法 ...

  2. CODING添加ssh提示格式错误的问题

    不能去.shh文件夹打开id_rsa.pub文件查看 解决方法: 进入.ssh文件夹,然后右键git bash here 输入代码 cat id_rsa.pub 回车即可

  3. Typora下载安装教程

    Typoa下载和安装 Typora---程序员记事本!!! 这里我们选择Typora作为我们的编辑器,功能的强大需要各位自己去体会. Typora下载地址 点击链接打开,然后选择Download! 根 ...

  4. java开发环境搭建,配置

    java开发环境搭建 下载jdk8的地址 是oracle的 安装JDK 下载电脑对应的版本 双击安装JDK 记住安装路径 配置环境变量 我的电脑/此电脑 右键属性 高级设置 环境变量 点击新建 变量名 ...

  5. [bzoj3524]Couries

    首先用到bzoj2456的做法,因为要求这个数出现次数超过了一半,如果其与不同的数两两相消的话最终一定会剩下自身(如果不保证存在可能会剩下别的,但保证存在了只会剩下自身),然后再用可持久化线段树维护即 ...

  6. 【Tool】Node.js 安装

    Node.js 安装 2019-07-29  14:56:14  by冲冲 1. 说明 电脑使用node.js存在两种方式: ① 第一种,下载(.exe)到本地电脑,不需要安装,下载后点击 node. ...

  7. 撸了一个可调试 gRPC 的 GUI 客户端

    前言 平时大家写完 gRPC 接口后是如何测试的?往往有以下几个方法: 写单测代码,自己模拟客户端测试. 可以搭一个 gRPC-Gateway 服务,这样就可以在 postman 中进行模拟. 但这两 ...

  8. [linux] 非root安装Python2及其模块

    需求 系统自带的python2版本太低,且没有想要的模块,非root用户无法安装.有些模块是python2写的,无法用python3,所以自己下载一个高版本的python2,可以自由下载模块. 实现 ...

  9. 35-Remove Element

    Remove Element My Submissions QuestionEditorial Solution Total Accepted: 115367 Total Submissions: 3 ...

  10. SPI详解2

    串行外设接口 (SPI) 总线是一种运行于全双工模式下的同步串行数据链路.用于在单个主节点和一个或多个从节点之间交换数据. SPI 总线实施简单,仅使用四条数据信号线和控制信号线(请参见图 1). 图 ...