关于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. PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilder，阿里MAVEN仓库地址更新为了https问题

    http://maven.aliyun.com/nexus/content/groups/public/,仓库地址更新为了https,所以下载时需要ssl认证,我们可以忽略ssl检查导致的问题,我们可 ...

  2. VLAN实验

    VLAN实验 如图所示:图中共有四个广播域,左边逻辑的分为两个广播域,右边也是逻辑的分为两个广播域, 配置顺序先配置交换机,在配置路由器 SW1 配置: 1.首先创建vlan [sw1]vlan ba ...

  3. Salesforce Consumer Goods Cloud 浅谈篇三之 行动计划(Action Plan)相关配置

    本篇参考: https://v.qq.com/x/page/f0772toebhd.html https://v.qq.com/x/page/e0772tsmtek.html https://v.qq ...

  4. linux安装python3.6.1

    Linux下安装Python3.6和第三方库   如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!! ...

  5. NOIP2021游记（退役记）

    11月 13日 停课了 学了一上午+一晚上的分块. 下午月赛切掉两道题之后xzh发现E题是道树剖,果断开始切E. 结果: 做了快两个小时还是0分. 11月 14日 上午把黄题冲上了100,绿题冲上了5 ...

  6. 基于CarbonData的电信时空大数据探索

    摘要:作为IOT最底层的无线通信网络生成大量与位置相关的数据,用于无线通信网络规划和优化,帮助电信运营商建设更好体验的精品网络,构建万物互联的信息社会. 本文分享自华为云社区<基于CarbonD ...

  7. Error occurred during initialization of VM Could not reserve enough space fo

    通过es的elasticsearch.bat 启动.发现错误:Error occurred during initialization of VM Could not reserve enough s ...

  8. Golang进阶，揉碎数据库中间件，干货满满！

    目录 必读 一.Centos7.Mac安装MySQL 二.主从复制原理 2.1.基于binlog_filename + position 2.2.基于GTID 三.my.cnf 四.测试SQL 五.中 ...

  9. nodejs中的fs模块中的方法

    nodejs中的fs模块 引入模块 const fs =require("fs") 检测文件是否存在fs.stat(path,callback) fs.stat("./n ...

  10. CF1368F Lamps on a Circle

    思考我们一定有最后一个状态是空着的灯是按照一个间隔\(k\) 只要将原来\(n\)个灯,每\(k\)个分一组,强制将最后一盏灯不选,并且第n盏灯不选,需要注意的是某一组一定会被第二个人全部关掉,那么可 ...