iChart--组件定制

vvpale 发布于2019-08-20 15:08 / 2472人阅读

摘要：使用纯语言利用的标签绘制各式图形。致力于为您的应用提供简单直观可交互的体验级图表组件。目前支持饼图环形图折线图面积图柱形图条形图。是基于协议的开源项目。阴影图形效果图其他形状的图标类似，不再陈述。

导语

ichartjs是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

No1.一分钟快速入门教程-Hello World

千里之行，始于足下。我们先从Hello World开始。

首先引入js文件

代码片段

//定义数据
$(function(){   
            var chart = new iChart.Column2D({
            render : "canvasDiv",//渲染的Dom目标,canvasDiv为Dom的ID
            data: data,//绑定数据
            title : "Hello World"s Height In Alphabet",//设置标题
            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"}
                    }
                }
            }]
        }

运行结果

至此，简单的入门已经完成，但是不能仅限于此，拓展下思路，如果柱状图不仅仅是单色填充，而是各式各样的图形，或者具有渐变效果的填充，该如何实现呢？

No2.定制属于自己的柱状图

首先看看我想实现的效果

再有：

查阅了ichart官方的demo和文档，未看到这方面的效果，只能自己动手，丰衣足食了。

字符串图形

首先实现一个相对简单的，绘制各种字符串。由于ichart底层是基于canvas的，所以只要拿到画笔，想画什么画什么，想画哪里画哪里。
首先运行上面的HelloWorld，单步调试，找到最终绘制的入口。

doDraw:function(_){
    if(_.get("actived")){
        _.drawRectangle();
    }
},

这里就是最终绘制的入口，可见源码中仅仅可以绘制矩形，好单一的感觉。
修改后的这个的入口：

doDraw:function(_){
    if(_.get("actived")){
      var _ = this._();
      var type = _.options.type;
      if(type === "slash"){
        _.drawSlash();
      }else if(type === "innerRect"){
        _.drawInnerRect();
      }else if(type === "wire"){
        _.drawWire();
      }else if(type === "star"){
        _.drawStar();
      }else if(type === "exclamation"){
        _.drawExclamation();
      }else if(type ==="innerRectAndLine"){
        _.drawInnerRectAndLine();
      }else if(type === "judge"){
        _.drawJudge();  
      }else{
        _.drawRectangle();
      }
    }
  },

默认依然绘制矩形，但是根据传入的类别，可以绘制图形的图形，如type==="exclamation"，程序会调用_.drawExclamation();方法，我们看看drawExclamation()方法的定义：

drawExclamation: function() {                                                  
   var _ = this._();
   var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get("border"), f_color=_.get("f_color"), shadow=_.get("shadow");
   _.T.box(
    _.get(_.X),
    _.get(_.Y),
    _.get(_.W),
    _.get(_.H),
    _.get("border"),
    _.get("f_color"),
    _.get("shadow"));
   var character = _.options.character && _.options.character.value;
   _.T.textStyle(_.L, "middle", $.getFont(_.get("fontweight"), _.get("fontsize"), _.get("font")));
   _.T.fillText(character, x + w/2 - _.T.measureText(character)/2, y+h/2, _.get("textwidth"), border.color);
 },

代码中显示，首先绘制矩形Box，其次绘制传入的文字，这样我们的货币汇率表就很容易实现了。

阴影图形

drawSlash: function(){
    var _ = this._();
    var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get("border"), f_color=_.get("f_color"), shadow=_.get("shadow");
    _.T.box(
      _.get(_.X),
      _.get(_.Y),
      _.get(_.W),
      _.get(_.H),
      _.get("border"),
      _.get("f_color"),
      _.get("shadow"));
    var difcount = 9;
    var a = h/w, dx = parseInt(w/difcount), dy = dx * a;
    for(var i = x + dx;i<= x+w; i+=dx){
      var x0 = i - border.width,y0 = y + border.width;
      var x1 = x + border.width, y1 = y + dy * (i-x)/dx - border.width;
      _.T.line(x0,y0,x1,y1, border.width, border.color, false);
      if(i !== x){
        var x0 = i - border.width,y0 = y + h - border.width;
        var x1 = x + w - border.width, y1 = y + dy * (i-x)/dx - border.width;
        _.T.line(x0,y0,x1,y1, border.width, border.color, false);
      }
    }
  },

效果图：

其他形状的图标类似，不再陈述。多看看一些效果图吧：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82026.html

iChart--地图显示人口统计

摘要：导语大数据呈现应用越来越广泛支持大数据呈现的，水平较高的有然而在地图呈现的功能上，大都只能绘制矢量地图，而不能呈现具有真实效果的地图鉴于此，本文重点在于如何制作一张，即可以看到真实效果，又能进行交互的矢量地图先睹为快若有所思技术选择想实现上导语大数据呈现应用越来越广泛,支持大数据呈现的SDK，水平较高的有echarts、highchart、D3；然而在地图呈现的功能上，大都只能绘制...

mtunique 2019-08-20 15:12 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
# Web Components 全揽

摘要：定制元素可以在原生元素外创建定制元素。此定制元素内部有一个加号按钮，一个减号按钮，一个显示当前值。此主题会在下一部分内介绍。定制元素的属性元素的属性被称为，对象内的属性被称为。做响应的同步处理。 Web Components 全揽 Web Components技术可以把一组相关的HTML、JS代码和CSS风格打包成为一个自包含的组件，只要使用大家熟悉的标签即可引入此组件。Web Com...

legendmohe 2019-08-23 13:50 评论0 收藏0
UXCore：一个兼容主流浏览器的 React PC 组件库

摘要：为什么我们需要是一个基于的套件库，兼容。全面的国际化支持所有组件的内置文案支持国际化，大部分文案用户可以主动设置。持续的功能增强借助社区和团队自身的力量，会在现有基础上优化使用体验，增强组件功能，添加更多常用组件来满足不同场景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...

Big_fat_cat 2019-08-19 18:38 评论0 收藏0
字节跳动旗下 ArcoDesign 开源啦

摘要：脚手架工具封装了物料操作命令，帮助用户快速创建物料项目并将其发布至物料平台。非常重视每一位开发者和用户的意见，希望大家踊跃反馈，积极共建。 ArcoDesign 提供的能力完善的基础组件基于 ArcoDesign 设计规范，Arco 提供了 67 个基础组件，这些基础组件足以支撑绝大多数的业务需求。同时，Arco 在这些基础组件的设计上，也开放了细粒度的配置，方便后续拓...

jayce 2021-10-27 14:20 评论0 收藏0