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. nyoj 题目14 会场安排问题

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...

  2. Junit单元测试--01

    如何编写单元测试 燕双龙 一 单元测试简介 单元测试是代码正确性验证的最重要的工具,也是系统测试当中最重要的环节.也是唯一需要编写代码才能进行测试的一种测试方法.在标准的开发过程中,单元测试的代码与实 ...

  3. Spring MVC请求参数绑定

    所谓请求参数绑定,就是在控制器方法中,将请求参数绑定到方法参数上 @RequestParam 绑定单个请求参数到方法参数上 @RequestParam("id") Integer ...

  4. Ubuntu系统设置中心不见了

    sudo apt-get install unity-control-center 执行安装上述即可 原因是因为在安装搜狗输入法的时候卸载了ibuts与系统控制中心

  5. bzoj3680吊打GTY

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

  6. photoshop 安装

    Photoshop 下载: http://www.duote.com/soft/54352.html 下载完后解压选择..\Adobe CS6\Set-up.exe ,点击  Set-up.exe   ...

  7. 洛谷 [P1608] 最短路计数

    最短路计数模版 本题要注意重边的处理 #include <iostream> #include <cstdio> #include <algorithm> #inc ...

  8. Codeforces 460D. Little Victor and Set

    D. Little Victor and Set time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  9. POJ3983 快算24

    很正常的题目,迷一样的答案. 测试数据只有一组,对没错只有一组. #include<cstdio> int main() { printf("5*(5-(1/5))\n" ...

  10. Selenium2+python自动化（unittest）

    # coding:utf-8from selenium import webdriverimport unittestimport timeclass Bolg(unittest.TestCase): ...