canvas数据可视化

Html

Css

.input {
	width:150px;
	position:absolute;
}
.input input {
	display:block;
	margin-bottom:2px;
	width:60px;
	border:none;
	border:1px solid rgb(22,212,203);
}
.input input:nth-of-type(1) {
	background-color:rgba(255,238,0,0.979);
}
.input input:nth-of-type(2) {
	background-color:rgb(30,238,11);
}
.input input:nth-of-type(3) {
	background-color:rgb(255,102,0);
}
.input input:nth-of-type(4) {
	background-color:rgb(236,13,236);
}
.input input:nth-of-type(5) {
	background-color:rgb(0,102,255);
}
.input input:nth-of-type(6) {
	background-color:rgba(158,154,154,0.993);
}
.input input:nth-of-type(7) {
	background-color:rgb(218,70,82);
}
button {
	width:62px;
	background-color:#fff;
	outline:none;
}
canvas {
	display:block;
}

//获取页面元素
  var cas = document.querySelector("#cas")
  var ctx = cas.getContext('2d');
  // 设置初始化状态
  ctx.arc(300, 300, 100, 0, 10)
  ctx.strokeStyle = 'red'
  ctx.stroke();
  // 注册点击生成事件 
  $('#btn').click(function() {
      ctx.clearRect(0, 0, cas.width, cas.height)
      var arr = [$('#one').val() * 1, $('#two').val() * 1, $('#three').val() * 1, $('#four').val() * 1, $('#five').val() * 1, $('#six').val() * 1];
      var color = ['rgba(255, 238, 0, 0.979)', 'rgb(30, 238, 11)', 'rgb(255, 102, 0)', 'rgb(236, 13, 236)', "rgb(0, 102, 255)", "rgba(158, 154, 154, 0.993)", "rgb(218, 70, 82)"];
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
          sum += arr[i];
      }
      var arr2 = [];
      for (var i = 0; i < arr.length; i++) {
          var data = arr[i] / sum * 360
          arr2.push(data)
      }
      ctx.font = '20px 楷体'
      var start = -90;
      for (var i = 0; i < arr2.length; i++) {
          if (arr2[i] == 0) {
              continue;
          }
          ctx.beginPath();
          ctx.moveTo(300, 300)
          if (i == 0) {
              ctx.arc(300, 300, 100, toRad(start), toRad(start + arr2[i]))
              var str = start;
              var str2 = start + arr2[i];
              start += arr2[i]
          } else {
              ctx.arc(300, 300, 100, toRad(start), toRad(start + arr2[i]))
              var str = start;
              var str2 = start + arr2[i];
              start += arr2[i];
          }
          ctx.fillStyle = color[i]
          ctx.fill();
          ctx.beginPath();
          ctx.textAlign = "left";
          ctx.textBaseline = "bottom"
          ctx.fillText(Math.floor(arr[i] / sum * 100) + '%', 550, (i + 1) * 20)
          ctx.stroke();

console.log((str2 - str) / 2 + str)
          var x1 = 130 * Math.cos(toRad((str2 - str) / 2 + str));
          var y1 = 130 * Math.sin(toRad((str2 - str) / 2 + str));
          if (((str2 - str) / 2 + str) <= 0) {
              x1 = 300 + x1;
              y1 = 300 + y1;
              ctx.textAlign = 'left';
              ctx.textBaseline = 'bottom'
          } else if (0 < (str2 - str) / 2 + str && (str2 - str) / 2 + str <= 90) {
              x1 = 300 + x1;
              y1 = 300 + y1;
              ctx.textAlign = 'left';
              ctx.textBaseline = 'top'
          } else if (90 < (str2 - str) / 2 + str && (str2 - str) / 2 + str <= 180) {
              x1 = 300 + x1;
              y1 = 300 + y1;
              ctx.textAlign = 'right';
              ctx.textBaseline = 'top'
          } else if (180 < (str2 - str) / 2 + str && (str2 - str) / 2 + str < 270) {
              x1 = 300 + x1;
              y1 = 300 + y1;
              ctx.textAlign = 'right';
              ctx.textBaseline = 'bottom'
          }
          ctx.beginPath();
          ctx.fillStyle = color[i]
          ctx.fillText(Math.floor(arr[i] / sum * 100) + '%', x1, y1)
          ctx.fill();
          ctx.beginPath();
          ctx.moveTo(300, 300)
          ctx.lineTo(x1, y1)
          ctx.strokeStyle = 'rgb(66, 66, 66)'
          ctx.lineWidth = "1"
          ctx.stroke();
      }
  })
  //角度转弧度
  function toRad(a) {
      return a * Math.PI / 180
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.2.3

立即下载

canvas数据可视化



代码描述：canvas数据可视化，输入数据生成饼形图，分析数据比值

可传入数据，生成饼形统计图，实现数据的可视化，更直观的面向数据；

3

最新

发表评论全部评论

暂时没有评论！

心之所向便是光 ?0

2017/11/2 16:02:08

用着还不错

oldmoons0

2017/11/3 18:26:34

非常感谢！

回复

let it be.0

2017/10/30 8:58:42

很实用
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

oldmoons

相关代码

canvas数据可视化

最新