关于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. [python]django rest framework写POST和GET接口

    版本声明 python3.6.5 Django-2.0.6 djangorestframework-3.8.2 mysqlclient-1.3.12 1.写一个登录接口,不多说,直接上代码 login ...

  2. Springboot 启动分析

    启动类 Spring 启动类主要是 Annotation (@SpringBootApplication) 和 main 方法体中的 SpringApplication.run. 其中注解 @Spri ...

  3. 菜鸡的Java笔记 第二十九 - java 单例设计模式

    SingleCase 单例设计模式        1.单例设计模式的特点        2.多例设计模式的特点    内容    单例设计模式        现在如果说有这么一个程序类 class S ...

  4. [loj3501]图函数

    $f(i,G)_{x}$为$x$对$i$是否有贡献,即在枚举到$x$时,$i$与$x$是否强连通 事实上,$f(i,G)_{x}=1$即不经过$[1,x)$中的点且$i$与$x$强连通 首先,当存在这 ...

  5. [atAGC047F]Rooks

    如果将$x$和$y$都离散,那么删除的点的$x_{i}$和$y_{i}$必然都组成了一个完整的区间(包括过程中) 将所有点按$x$排序,再令$f[i][j][0/1]$表示当删除完区间$[i,j]$且 ...

  6. 面向对象中static的理解（1）

    class 对象名字{ data members; static data members; function members; static function members; } 每创建一个对象, ...

  7. 安装maven配置maven环境变量

    在官网下载maven的包 我们下载的是:apache-maven-3.5.2-bin.zip 3.解压缩maven的包到某个目录中 4.配置maven的环境变量 配置M2_HOME环境变量为maven ...

  8. Mac更换鼠标指针样式_ANI、CUR文件解析

    前情提要 因为之前写了一篇mousecape的博客有一些回应,所以我决定写个续.主要是教大家怎么把cur文件和ani文件插入到mousecape里面,顺便提供几个做好的cape文件. 先给大家推荐一个 ...

  9. Kubernetes-网络

    前言 本篇是Kubernetes第十一篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战,此篇文章概念比较多,后续我会继续出一些网络相关实战以及原理探索篇. Kubernetes系列文章: K ...

  10. AGC050B Three Coins

    做的时候有思考到是否能转化成移动点问题,但是没有清晰的把他解释出来. NOIP的时候也一样,T3也有考虑到是否能转为差分,但是也没有清晰的写出来. 自己做题的时候应尽量保证草稿纸和思绪的清晰,而不是在 ...