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 制作的图表的更多相关文章

  1. Tableau怎么制作专业图表

    Tableau怎么制作专业图表 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 统计表 1.1 不同种类的图表风格 商业周刊的图表风格 经济学人的图表风格 华尔 ...

  2. 158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能

    158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能 一.背景 最近对 Power BI 中使用 SVG 比较感兴趣,今天我们使用 DAX + SVG 复刻一下 Ze ...

  3. 利用Highcharts插件制作动态图表

    向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/ 1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研 ...

  4. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  5. 用excel2010 制作复合图表

    用excel2010制作双轴柱线复合图表就是要用excel2010做一个这样的图表:

  6. 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？

    [编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...

  7. D3制作基础图表学习总结(part1)

    一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 ...

  8. 利用Highcharts制作web图表学习（二）

        最近中海油的项目需要用到图表展示数据,最近还是一直边学习边开发,今天做了一个展示,炼化厂加热炉效率展示的柱状图,把代码贴出来,大家指点一下互相学习,我是通过数组给Highcharts绑定的值, ...

  9. 利用Highcharts制作web图表学习（一）

    前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网   一.先说说HighCharts的 ...

随机推荐

  1. 使用 宝塔面板快速部署Java项目

    环境描述: 服务器系统:CentOS7 64位操作系统 面板版本:宝塔6.9.4 Nginx版本:Nginx 1.16 Tomcat版本:Tomcat7 JDK版本:1.8.0_121 环境部署就不用 ...

  2. 【转载】zookeeper使用和原理探究（一）

    最近开始看到一些公司在使用zookeeper,本身对此了解的很少,这里看到一篇非常好的文章,因此转载 原贴地址:http://www.blogjava.net/BucketLi/archive/201 ...

  3. iOS中常见的自定义宏

    //字符串是否为空 #define kStringIsEmpty(str) ([str isKindOfClass:[NSNull class]] || str == nil || [str leng ...

  4. 【bzoj2161】布娃娃 权值线段树

    题目描述 小时候的雨荨非常听话,是父母眼中的好孩子.在学校是老师的左右手,同学的好榜样.后来她成为艾利斯顿第二代考神,这和小时候培养的良好素质是分不开的.雨荨的妈妈也为有这么一个懂事的女儿感到高兴.一 ...

  5. bzoj3680吊打GTY

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3680 sol  :吊打出题人(逃~ puts("nan") 出题人题解:h ...

  6. eclspse魔板

    window->prefence->搜索 template即可

  7. mybatis 关联查询时，从表只返回第一条记录解决办法

    如果两表联查,主表和明细表的主键都是id的话,明细表的多条只能查询出来第一条. 造成以上情况可能的原因: 1.级联查询的时候,主表和从表有一样的字段名的时候,在mysql上命令查询是没问题的.但在my ...

  8. Memcache缓存用好了，性能有了很大的提高

    web服务器1 web服务器2 web服务器3如果每台web服务器都向mysql服务器表插入信息并且要做出相应最新编号反馈出现这样的高并发时候怎么减少服务器压力,同时用户体验还要好 可以使用Memca ...

  9. [LeetCode] Jump Game II 贪心

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  10. mdev的基本工作原理【转】

    转自:http://www.cnblogs.com/hnrainll/archive/2011/06/10/2077435.html 分析过mdev(udev的BusyBox简化版)源码的都知道mde ...