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. C#知识点<4>

    1\C# 运算符重载 您可以重定义或重载 C# 中内置的运算符.因此,程序员也可以使用用户自定义类型的运算符.重载运算符是具有特殊名称的函数,是通过关键字 operator 后跟运算符的符号来定义的. ...

  2. BZOJ4650 [NOI2016]优秀的拆分 【后缀数组】

    题目 如果一个字符串可以被拆分为 AABBAABB 的形式,其中 AA 和 BB 是任意非空字符串,则我们称该字符串的这种拆 分是优秀的.例如,对于字符串 aabaabaa,如果令 A=aabA=aa ...

  3. DocumentFragment批量操作dom

    DocumentFragment,文档片段,不属于文档树,其parentNode为null.当把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而 ...

  4. mrpt安装

    1.mrpt2.0参 See PPA for mrpt 2.0 branch (for mrpt 1.5.* read here). sudo add-apt-repository ppa:josel ...

  5. Codeforces Round #364 (Div. 2) D 数学/公式

    D. As Fast As Possible time limit per test 1 second memory limit per test 256 megabytes input standa ...

  6. 【13】vuex2.0 之 state

    Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...

  7. mvc3 学习链接收集

    原文发布时间为:2011-04-17 -- 来源于本人的百度文章 [由搬家工具导入] The mvc3 study links collection http://dotnetslackers.com ...

  8. Android开发跳坑记录

    本文主要记录在Android开发中遇见的一些问题,以及解决方法. 2015.12.01 1.adb.exe 端口被占用 解决: http://blog.csdn.net/xiaanming/artic ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---56

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. Virtualbox 设置虚拟机上网并和主机互通（如ping等）

    我的主机是Ubuntu12.04, 安装virtualbox虚拟了一个xp系统.把xp作为一个开发用的机器,需要上网,并且和主机以及虚拟机之间互相访问. 1. 在virtual设置界面,将xp系统的网 ...