统计图

下载代码

html

css

分享到微信朋友圈

html

css

@import "https://fonts.googleapis.com/css?family=Roboto:400,700";
body {
  padding: 100px 0;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  background: #17263f;
}

* {
  box-sizing: border-box;
}

.container {
  padding: 0 40px;
  text-align: center;
}

.pie-chart {
  max-width: 300px;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.pie-chart + .pie-chart {
  margin-left: 40px;
}
.pie-chart .max-circ {
  width: 200px;
  height: 200px;
  margin: auto;
  padding-top: 80px;
  border-radius: 50%;
  background: #20405f;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.3), 0 0 7px rgba(255, 255, 255, 0.8);
}
.pie-chart .max-circ span {
  display: block;
}
.pie-chart .max-circ .label {
  font-size: 11px;
  margin: 0 0 10px;
}
.pie-chart .max-circ .value {
  font-size: 24px;
  font-weight: 700;
  -webkit-filter: brightness(1.4);
          filter: brightness(1.4);
}
.pie-chart .legend {
  margin: 20px 0 0;
  font-size: 12px;
  text-align: center;
}
.pie-chart .legend li {
  margin: 0 5px 10px;
  padding: 8px 8px 5px;
  border-radius: 1px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  color: #ddd;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.2s, opacity 0.2s;
  transition: background 0.2s, opacity 0.2s;
}
.pie-chart .legend li span {
  color: #fff;
  font-weight: 700;
}
.pie-chart .slice {
  cursor: pointer;
  -webkit-filter: brightness(1) grayscale(0.15);
          filter: brightness(1) grayscale(0.15);
  -webkit-transition: -webkit-transform 0.2s, -webkit-filter 0.2s;
  transition: -webkit-transform 0.2s, -webkit-filter 0.2s;
  transition: transform 0.2s, filter 0.2s;
  transition: transform 0.2s, filter 0.2s, -webkit-transform 0.2s, -webkit-filter 0.2s;
}
.pie-chart .slice path {
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.pie-chart .slice text {
  font-size: 14px;
}
.pie-chart .slice:hover, .pie-chart .slice.max {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: brightness(1.4) grayscale(0);
          filter: brightness(1.4) grayscale(0);
}
.pie-chart .slice:hover path, .pie-chart .slice.max path {
  opacity: 1;
}

JavaScript

var gradients = [{
  id: 'pink',
  start: '#b34f53',
  end: '#dd5b59'
}, {
  id: 'blue',
  start: '#095a82',
  end: '#0170a7'
}, {
  id: 'red',
  start: '#874d2a',
  end: '#a55724'
}, {
  id: 'green',
  start: '#5b7964',
  end: '#869d8d'
}, {
  id: 'aqua',
  start: '#3f6071',
  end: '#588094'
}, {
  id: 'other',
  start: '#2272ad',
  end: '#308cd0'
}];

var data = [];

data['piedata'] = [{
  label: "18-24",
  value: 25,
  color: 'red'
}, {
  label: "25-34",
  value: 22,
  color: 'blue'
}, {
  label: "35-44",
  value: 31,
  color: 'pink'
}, {
  label: "45-54",
  value: 14,
  color: 'green'
}, {
  label: "55-64",
  value: 6,
  color: 'other'
}, {
  label: "65+",
  value: 2,
  color: 'aqua'
}];

data['piedata2'] = [{
  label: "Male",
  value: 54,
  color: 'blue'
}, {
  label: "Female",
  value: 46,
  color: 'pink'
}];

$(document).ready(function() {
  $('[data-pie]').each(function() {
    var chartId = '#' + $(this).attr('id');
    var chartLabel = $(this).attr('data-pie-label');
    var piedata = data[$(this).attr('data-pie')];

var width = 300,
      height = 300,
      radius = 140;

var pie = d3.layout.pie()
      .value(function(d) {
        return d.value;
      })
      .sort(null);

var arc = d3.svg.arc()
      .outerRadius(radius)
      .innerRadius(radius / 1.5);

var max = d3.max(piedata, function(d) {
      return +d.value;
    });

var myChart = d3.select(chartId).append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + ', ' + (height / 2) + ')')
      .selectAll('path').data(pie(piedata))
      .enter().append('g')
      .attr('class', function(d, i) {
        var cssClass = 'slice';
        if (d.data.value === max) {
          cssClass += ' max';
        }
        return cssClass;
      });

var gradient = d3.select(chartId + ' svg')
      .selectAll('linearGradient').data(gradients)
      .enter().append('linearGradient')
      .attr('id', function(d, i) {
        return gradients[i].id;
      });

gradient.append('stop')
      .attr('offset', '0%')
      .attr('stop-color', function(d, i) {
        return gradients[i].start;
      });

gradient.append('stop')
      .attr('offset', '100%')
      .attr('stop-color', function(d, i) {
        return gradients[i].end;
      });

legend.append('span')
      .text(function(d, i) {
        return d.data.value + '%';
      });

var maxCirc = d3.select(chartId)
      .append('div')
      .attr('class', 'max-circ');

maxCirc.append('span')
      .attr('class', 'label')
      .text(chartLabel);

maxCirc.append('span')
      .attr('class', 'value')
      .attr('style', function() {
        var top = piedata.filter(function(obj) {
          return obj.value == max;
        });
        var gradient = gradients.filter(function(obj) {
          return obj.id == top[0].color;
        });
        return 'color: ' + gradient[0].end;
      })
      .text(function() {
        var top = piedata.filter(function(obj) {
          return obj.value == max;
        });
        return top[0].label + ': ' + top[0].value + '%';
      });
  });
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg