svg图表

下载代码

html

css

分享到微信朋友圈

html

css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1em;
  text-align: center;
  color: #f0f0f0;
  background-color: #252525;
}

h1 {
  font-size: 2.5em;
  margin: 2em 0 .5em;
}

h2 {
  margin-bottom: 3em;
}

em,
strong {
  font-weight: 700;
}

input {
  display: none;
}

.wrapper {
  width: 37.5em;
  display: inline-block;
}

#svg-chart {
  height: 50vh;
  width: 100%;
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.circle {
  -webkit-transition: all .02s ease-in-out;
  transition: all .02s ease-in-out;
}

.white-line {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.chart-items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: auto;
  max-height: 3em;
  padding: 3em 0;
  background-size: 100% 3em;
  background-position: left 3em;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px -1px rgba(255, 255, 255, 0.25);
}
.chart-items__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  position: relative;
  padding: 1em;
  line-height: 1em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.chart-items__item:last-child {
  border: 0;
}

JavaScript

(function($) {
  $.fn.svgPath = function(options) {

// This is the easiest way to have default options.
    var settings = $.extend({
        // These are the defaults.
        id: 'path-0',
        color: '#556b2f',
        backgroundColor: 'white',
        data: [
          [0, 0],
          [10, 10]
        ],
        attributes: [
          ['fill', 'transparent'],
          ['stroke', '#33aaee']
        ]
      }, options),
      chart = this,
      positions = settings.data,
      positionsArr = [],
      thisPos = [],
      widthUnit = (10 / 100) * chart[0].clientWidth,
      heightUnit = (10 / 100) * chart[0].clientHeight;

// console.log(chart);

function drawSvgPath(properties, element, data, id) {
      element.setAttribute('d', data);
      element.setAttribute('id', id);
      $.each(properties, function(i) {
        element.setAttribute(properties[i][0], properties[i][1]);
      });
      element.style.stroke = properties.stroke;
      element.style.strokeWidth = properties.strokeWidth;
      return element;
    }

function svgPath(properties, element, data, id) {
      this.properties = properties;
      this.element = element;
      this.data = data;
      this.id = id;
    }

for (var i = 0; i < positions.length; i++) {
      thisPos = [];
      thisPos.push(widthUnit * positions[i][0], heightUnit * positions[i][1]);
      positionsArr.push(thisPos.join(','));
      $('#chart-items').append('<li class="chart-items__item" data-position="' + positions[i] + '">Point ' + i + ' <span>' + positions[i] + '</span></li>');
    }

// console.log(positionsArr);

positionsArr = 'M ' + positionsArr.join(' ');

var pathObj = new svgPath(settings.attributes, document.createElementNS("http://www.w3.org/2000/svg", 'path'), positionsArr, settings.id);

chart.find('g').append(drawSvgPath(pathObj.properties, pathObj.element, pathObj.data, pathObj.id));

var chartPath = Snap("#" + pathObj.id),
      chartDot = Snap("#circle"),
      chartList = $('#chart-items'),
      lenB = chartPath.getTotalLength(),
      dotPositions = [{
        x: 0,
        y: 0
      }];

chartPath.attr({
      strokeMiterLimit: "0",
      "stroke-dasharray": lenB + " " + lenB,
      "stroke-dashoffset": lenB
    });
    chartPath.animate({
      "stroke-dashoffset": 0
    }, 1741, mina.linear);

Snap.animate(0, lenB, function(val) {
      position = chartPath.getPointAtLength(val);
      dotPositions.push({
        x: position.x,
        y: position.y
      });
    }, 1741, mina.linear);

chartListItems = chartList.find('li');
    // chartList.css('padding').split('px ')[0]
    chartListHeight = (chartListItems.length * chartList.css('padding').split('px ')[0]) - chartList.css('padding').split('px ')[0];

chartList.on('scroll', function(event) {
      result = Math.floor((event.target.scrollTop * 100) / chartListHeight);
      chartDot.attr({
        cx: dotPositions[result].x,
        cy: dotPositions[result].y
      });

});
  };

}(jQuery));

$('#svg-chart').svgPath({
  data: [
    [0, 0],
    [1, 1],
    [2, 1],
    [3, 5],
    [4, 4],
    [5, 6],
    [6, 7],
    [7, 9],
    [8, 7],
    [9, 5],
    [10, 0]
  ],
  attributes: [
    ['fill', 'url(#pattern-line)'],
    ['stroke', 'url(#stroke)'],
    ['stroke-width', '6'],
    ['stroke-linecap', 'round'],
    ['stroke-miterlimit', '10'],
    ['stroke-linejoin', 'round'],
    ['strokeMiterLimit', '10'],
    ['strokeDasharray', '12 6'],
    ['strokeDashOffset', '180'],
    ['marker-mid', 'url(#MidMarker)'],
    ['filter', 'url(#f3)']
  ]
});

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