zoukankan      html  css  js  c++  java
  • g2图表

    <script>
      var data = [{
        type: '评估中',
        percent: 0.23
      }, {
        type: '设计中',
        percent: 0.28
      }, {
        type: '正在开发',
        percent: 0.30
      }, {
        type: '已上线',
        percent: 0.19
      }];
      var sum = 500;
      var ds = new DataSet();
      var dv = ds.createView().source(data);
      // transform 数据变换
      dv.transform({
        type: 'map',  // type运算的方法名
        callback: function callback(row) {
          row.value = parseInt(sum * row.percent);
          return row;
        }
      });
    
    
      // 1、 创建 chart var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: 'auto' }); // 2、 载入数据 chart.source(dv); // 提示信息 chart.tooltip(false); // 图例 即右边的表示信息 chart.legend({ position: 'right-center', offsetX: -100 }); // 坐标系 (设定 图形位置) chart.coord('theta', { radius: 0.75, innerRadius: 0.6 }); // 3、 创建图形语法 (x、y轴方向上 的各种属性设置)
    // chart.geom(“第一个 要创建的图形”).attr(“图形属性映射,即图形要设置的属性在 后面一一打点调用”) chart.intervalStack().position('percent').color('type', ['#0a7aca', '#0a9afe', '#4cb9ff', '#8ed1ff']).opacity(1).label('percent', { offset: -18, textStyle: { fill: 'white', fontSize: 12, shadowBlur: 2, shadowColor: 'rgba(0, 0, 0, .45)' }, rotate: 0, autoRotate: false,
      // formatter 格式化文本 formatter: function formatter(text, item) { return String(parseInt(item.point.percent * 100)) + '%'; } });

      // 辅助文本 chart.guide().html({ position: ['50%', '50%'], html: '<div class="g2-guide-html"><p class="title">项目总计</p><p class="value">500</p></div>' });

      // 图表事件 chart.on('interval:mouseenter', function(ev) { var data = ev.data._origin; $(".g2-guide-html").css('opacity', 1); $(".g2-guide-html .title").text(data.type); $(".g2-guide-html .value").text(data.value); });
      // 图表事件 chart.on('interval:mouseleave', function() { $(".g2-guide-html .title").text('项目总计'); $(".g2-guide-html .value").text(500); });

    // 3、 渲染图形 chart.render(); </script>

      

  • 相关阅读:
    MYSQL 注射精华
    MySQL数据库安全配置
    linux命令
    python异常处理、反射、socket
    random、面向对象编程
    序列化、常用模块以及面向对象基础
    python 装饰器、递归原理、模块导入方式
    python递归、collections系列以及文件操作进阶
    python基础
    python简介
  • 原文地址:https://www.cnblogs.com/anbozhu7/p/11891560.html
Copyright © 2011-2022 走看看