ichartjs 制作的图表
ichartjs资源包下载：https://files.cnblogs.com/files/xiandedanteng/ichartjs-ichartjs1.2.zip
本例下载地址：https://files.cnblogs.com/files/xiandedanteng/ichartjsSample01.rar
效果：
页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script src="ichart.1.2.min.js"></script>
<body>
<div id='canvasDiv'></div>
</body>
</html>
<script type="text/javascript">
<!--
//定义数据
var data = [
{name : 'H',value : 7,color:'#a5c2d5'},
{name : 'E',value : 5,color:'#cbab4f'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'O',value : 5,color:'#a56f8f'},
{name : 'W',value : 13,color:'#c12c44'},
{name : 'O',value : 15,color:'#a56f8f'},
{name : 'R',value : 28,color:'#9f7961'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'D',value : 4,color:'#6f83a5'}
];
$(function(){
var chart = new iChart.Column2D({
render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
data: data,//绑定数据
title : 'ichartjs Sample',//设置标题
width : 800,//设置宽度，默认单位为px
height : 400,//设置高度，默认单位为px
shadow:true,//激活阴影
shadow_color:'#c7c7c7',//设置阴影颜色
coordinate:{//配置自定义坐标轴
scale:[{//配置自定义值轴
position:'left',//配置左值轴
start_scale:0,//设置开始刻度为0
end_scale:26,//设置结束刻度为26
scale_space:2,//设置刻度间距
listeners:{//配置事件
parseText:function(t,x,y){//设置解析值轴文本
return {text:t+" cm"}
}
}
}]
}
});
//调用绘图方法开始绘图
chart.draw();
});
//-->
</script>
ichartjs 制作的图表的更多相关文章
- Tableau怎么制作专业图表
Tableau怎么制作专业图表 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 统计表 1.1 不同种类的图表风格 商业周刊的图表风格 经济学人的图表风格 华尔 ...
- 158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能 一.背景 最近对 Power BI 中使用 SVG 比较感兴趣,今天我们使用 DAX + SVG 复刻一下 Ze ...
- 利用Highcharts插件制作动态图表
向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/ 1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研 ...
- Highcharts使用教程（1）：制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- 用excel2010 制作复合图表
用excel2010制作双轴柱线复合图表就是要用excel2010做一个这样的图表:
- 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？
[编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...
- D3制作基础图表学习总结(part1)
一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki 二.建立图表 ...
- 利用Highcharts制作web图表学习（二）
最近中海油的项目需要用到图表展示数据,最近还是一直边学习边开发,今天做了一个展示,炼化厂加热炉效率展示的柱状图,把代码贴出来,大家指点一下互相学习,我是通过数组给Highcharts绑定的值, ...
- 利用Highcharts制作web图表学习（一）
前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网 一.先说说HighCharts的 ...
随机推荐
- redhat--1
---------------- ---------------- 免密码ssh远程登录设置 . In host1, copy the ssh-key to the host2 hosts # ssh ...
- col-md-push-*和col-md-offset的区别
实现方式的区别:col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别,col-md-offset ...
- 【bzoj4825】[Hnoi2017]单旋 线段树+STL-set
题目描述 H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 H 国的必修技能.有一天 ...
- BZOJ 4070 [Apio2015]雅加达的摩天楼 ——分块 SPFA
挺有趣的分块的题目. 直接暴力建边SPFA貌似是$O(nm)$的. 然后考虑分块,$\sqrt n$一下用虚拟节点辅助连边, 以上的直接暴力连边即可. 然后卡卡时间,卡卡空间. 终于在UOJ上T掉辣. ...
- 关于ContextImp的源码分析
关于ContextImp的源码分析 来源: http://blog.csdn.net/qinjuning/article/details/7310620 Context概述: Android ...
- hdu 4501 多维0-1背包
小明系列故事——买年货 Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- 洛谷 [P3620] 数据备份
贪心神题 首先我们发现一个显然的贪心策略,连接相邻两个写字楼总是更优. 所以本题就变成了数轴上一堆点,要选 k 个彼此不相邻的区间,使得区间长度最小 对于 10000 的数据来说,我们可以用 DP 解 ...
- 【BZOJ1030】文本生成器（容斥原理，AC自动机，计数DP）
题意:给出n个字符串,求长为m至少包含n个里其中一个的串的字符串一共有多少个,字符集为A到Z,答案对10007取模 n<=60,len<=100 思路:将至少一个转化为所有个数减去没有出现 ...
- URL重写IIS7(URL Rewrite Module) 比之前的urlrewrite更方便使用
原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 微软在IIS7中添加了URL的重写模块,并且免费使用，可以导入.htaccess规则，确实是个不错的选择 URL ...
- Manjaro linux软件源设置
1.从官方http://jaist.dl.sourceforge.net/project/manjarotest/16.06-dev/kde/minimal/manjaro-kde-minimal-1 ...