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. Spring整合hibernate -声明事务管理

     目录 1 sessionFactory 注入HibernateTransactionManager 2 XML配置的配置 3 添加annotation-driven 4 引入JAR包 5在servi ...

  2. linux系统负载状态检查脚本

    为了便于分析问题,编写了一个linux状态检查脚本,脚本可放置任意目录,脚本执行检测后会输出日志记录到当前目录下.直接执行脚本可用于一次检测,可通过日志进行分析.如果需要长时间监测,可执行-x参数,脚 ...

  3. 多线程（继承Thread）

    /** *Thread的常用方法 *1.start(),启动线程再执行run方法 *2.run():子线程要执行的代码放入run()方法中 *3.currentThread()静态的,调取当前线程,返 ...

  4. StringBuilder与StringBuffer

    转:http://www.cnblogs.com/pepcod/archive/2013/02/16/2913557.html JAVA中用于处理字符串常用的有三个类: java.lang.Strin ...

  5. UVA1218 Perfect Service

    Time Limit: 3000MS     64bit IO Format: %lld & %llu /*by SilverN*/ #include<iostream> #inc ...

  6. 数据库一直显示"正在恢复"

    restore database [DataBase] with recovery ALTER DATABASE DataBase SET OFFLINE WITH ROLLBACK IMMEDIAT ...

  7. pyspider 爬虫教程（一）：HTML 和 CSS 选择器

      虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息.但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识.不过,没想到这个教程居然会变成一篇译文,在这个 ...

  8. 图表插件echars的使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  9. 【Visual Studio】简单内存泄漏检测方法 解决 Detected memory leaks! 问题（转）

    原文转自 http://blog.csdn.net/u011430225/article/details/47840647 我的环境是: XP SP2.VS2003 最近在一个项目中, 程序退出后都出 ...

  10. LeetCode OJ--Multiply Strings **

    https://oj.leetcode.com/problems/multiply-strings/ 用字符串实现大数乘法,细节题,细节很多 class Solution { public: stri ...