标签：g2 percent chart 图表 html var type

<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',
    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: 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>

标签：g2,percent,chart,图表,html,var,type
来源： https://www.cnblogs.com/anbozhu7/p/11891560.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。