web前段canvasjs图表制作一
关于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图表制作一的更多相关文章
- JQuery WEB前段开发
JQuery WEB前段开发 Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, S ...
- silverlight visifire控件图表制作——silverlight 后台方法页面事件
1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...
- Android 工程师如何快速学会web前段
Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...
- ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明
原文:ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 By 李远祥 ArcGIS Por ...
- silverlight visifire控件图表制作——silverlight 后台方法ControlChart.xaml.cs
一.构造方法ControlChart 1.前台页面控件赋值 //时间下拉框赋值,下拉框赋选定值 for (int ii = DateTime.Today.Year; ii ...
- 【转】Django 图表制作(By Highcharts)
马克,待不时之需 Django 图表制作(By Highcharts):https://blog.csdn.net/Temanm/article/details/54141759 免费而优秀的图表JS ...
- 最近一直是web前段,没什么意思,所以就不发资料了
最近一直是web前段,没什么意思,所以就不发资料了 版权声明:本文为博主原创文章,未经博主允许不得转载.
- ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲
ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 1. 网页绘制图表 Googl ...
- 个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签
2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...
随机推荐
- elasitcsearch单机版安装
1.下载压缩包 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.6.2.tar.gz 2.解压修改配置文件 c ...
- vue引入elementUI(第三方样式库)
前置: 在已经安装好vue的前提下 ,没有安装vue参考: vue搭建教程 elementUI官网组件使用文档: elementUI使用文档 1.终端直接运行安装命令 npm i element-ui ...
- super和this
super注意点: 1.super调用父类的构造方法,必须在构造方法的第一个 2.super必须只能出现在子类的方法或者构造方法中 3.super和this不能同时调用构造方法 this: 代表的对象 ...
- [hdu6145]Arithmetic of Bomb II
对于题中的"normal expression"(仅含加减乘和无前导0的非负整数,无括号)的计算,实际上并不需要通常的表达式求值,而可以用下述方式计算-- 维护三元组$(a,b,c ...
- [atAGC052B]Tree Edges XOR
定义两点的距离$d(x,y)$为$x$到$y$路径上边权异或和,则两棵树相同当且仅当$\forall 1\le i\le n$,$d(1,i)$相同 新建一个节点0,连边$(0,1)$,初始权值为0, ...
- AutoHotkey
;注释 : #==win !==Alt ^==Ctr +==shift 需要注意的是不要和现有的快捷键冲突,他会代替掉原来的快捷键操作很难受的. 热指令: 比如 ::yx1::1359720840 ...
- 学习 NPM 最基础的指令
什么是 NPM npm的核心是一个软件注册表(software registry). registry /ˈredʒɪstri/ n. 注册表:登记处:挂号处.注册表就像是信息登记表或者数据库. np ...
- Python集合&字典
Python集合&字典 @ 目录 字典 字典的几种定义方式 第一种 第二种 第三种 字典的一些基本操作 通过key得到value 增加字典键值对 删除字典键值对 格式化操作 清空字典 复制字典 ...
- Educational Codeforces Round 89 题解
昨晚简单 vp 了场比赛找了找状态,切了 5 个题(有一个差点调出来),rk57,还算理想吧,毕竟我已经好久没碰过电脑了( A 签到题不多说,直接输出 \(\min\{a,b,\dfrac{a+b}{ ...
- python-django-请求响应对象
用户请求终端的信息: 包括使用的ip地址,浏览器类型等 cookie: 测试测试: def print_request(request): print(request) print("!!! ...