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的 ...
随机推荐
- idea调试查看mybitis发送的语句(引用)
MyBatis 的配置文件 Configuration 中有相关属性,设属性即可,不用再放一个 log4j.properties 文件. <configuration> <setti ...
- 将数据缓存到sessionStorage中
//获取侧边栏 if (sessionStorage.getItem(`${env}${empId}leftMenu`)) { const leftMenu = JSON.parse(sessionS ...
- html获取当前地址的参数
//jsd代码 function UrlSearch(){ var name,value; var str1 = ""; var str=loc ...
- CSA Round 84 Growing Trees
题目 题目大意 给定一棵有 $n$ 个节点的树,边的权值每天变化.对于第 $i$ 条边,在第 $0$ 天,其权值为 $c_i$,每天权值变化 $a_i$(即,在第 $k$ 天,其权值为 $c_i + ...
- openssl-1.0.1c交叉编译动态库（转）
linux编译相关(13) 版权声明:本文为博主原创文章,未经博主允许不得转载. #交叉编译openssl ------直接修改Makefile新加这一行:CROSS_COMPILE= arm-un ...
- imx6 PCIE使能加载ath9k无线网卡
imx6q配置pcie无线网卡遇到如下问题: imx6q-pcie 1ffc000.pcie: PCI host bridge to bus 0000:00 pci_bus 0000:00: root ...
- div模拟dropdownlist控件 div下拉菜单
原文发布时间为:2009-10-16 -- 来源于本人的百度文章 [由搬家工具导入] 控件发布：div2dropdownlist(div模拟dropdownlist控件) div3dropdownli ...
- Linux继续学习笔记
本篇文章是慕课网<Linux达人养成计划2>笔记. 第一章 VIM文本编辑器 VI : Visual Interface (可视化接口) VIM: 在VI的基础上进行的升级,相比于VI有一 ...
- JS-JavaScript String 对象-string对象方法2: indexOf()、lastIndexOf()、charAt()
1.indexOf():可返回某个指定的字符串值在字符串中首次出现的位置. 1).语法:string.indexOf(searchvalue,start): searchvalue:必需.规定 ...
- Java IO 学习（四）BIO/NIO
本文会尝试介绍Java中BIO与NIO的范例与原理 使用的模型非常简单:服务器--客户端模型,服务器会将客户端发送的字符串原样发回来.也就是所谓的echo server. BIO 也就是所谓的Sock ...