VIS（vis.js）+ SVG实现的多线条曲线图表

Data Vis Line Chart

html5, chart

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4473
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// create a dataSet with groups
var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
var groups = new vis.DataSet();
groups.add({
    id: 0,
    content: names[0],
    options: {
        drawPoints: false,
        interpolation: {
            parametrization: 'centripetal'
        }
    }
});

groups.add({
    id: 1,
    content: names[1],
    options: {
        drawPoints: false,
        interpolation: {
            parametrization: 'chordal'
        }
    }
});

groups.add({
    id: 2,
    content: names[2],
    options: {
        drawPoints: false,
        interpolation: {
            parametrization: 'uniform'
        }
    }
});

groups.add({
    id: 3,
    content: names[3],
    options: {
        drawPoints: {
            style: 'circle'
        },
        interpolation: false
    }
});

var options = {
    drawPoints: false,
    dataAxis: {
        visible: false
    },
    legend: true,
    start: '2014-06-11',
    end: '2014-06-22'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

$body-bg: #16191c; //cerulean 90 darkened
$card-bg: lighten(#16191c, 6%); //cerulean 90
$blue: #5392ff; // blue 40 
$indigo: #9b82f3; // indigo 40
$lime: #95d13c; // lime 20
$magenta: #ff509e; // magenta 40
$teal: #40d5bb; // teal 20
$white: #FFF;
$label-color: #6f7878;

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  background-color: $body-bg;
}

.wrapper {
  background-color: $body-bg;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card {
  width: 50%;
  margin: 0 auto;
  padding: 48px;
  background-color: darken(#23272b, 3%);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.card__title {
  margin: 0;
  color: #f6f6f6;
  font-weight: 300;
  //color: #b8c1c1;
  letter-spacing: 1px;
}

// Wrapper for timeline
.vis-timeline {
  background-color: darken(#23272b, 3%);
}

// Controls labels
.vis-labelset .vis-label {
  color: $white;
  border-color: $card-bg;
}

// This controls background colors
.vis-item.vis-range {
    background: -webkit-linear-gradient(left, $indigo, $magenta);
  color: white;
  border: 0;
}

.card--2 {
  .vis-item.vis-range {
    background: -webkit-linear-gradient(left, $teal, $lime);
  }
}

.vis-foreground .vis-group {
  border-bottom: 1px solid $card-bg;
}

.vis-panel.vis-center {
  border-color: $card-bg;
}

.vis-timeline {
  //border: 0;
   border-color: $card-bg
}

.vis-panel.vis-left,
.vis-panel.vis-bottom,
.vis-panel.vis-right,
.vis-panel.vis-top,
.vis-panel.vis-center{
  border-color: $card-bg
}

.vis-time-axis {
  border-color: $card-bg;
  color: $card-bg;
}

.vis-time-axis .vis-grid.vis-vertical {
  border-color: $card-bg
}

.card--1 {
  .vis-current-time {
    background-color: $teal;
  }
}

.card--2 {
  .vis-current-time {
    background-color: $magenta;
  }
}

.vis-foreground .vis-group {
  height: 60px;
}

.vis-labelset .vis-label {
  height: 60px;
  color: $label-color;
}

.vis-time-axis .vis-text {
  color: $label-color;
}

// Path Colors
.vis-graph-group0 {
  fill: $blue;
  stroke: $blue;
}

.vis-graph-group1 {
  fill: $magenta;
  stroke: $magenta;
}

.vis-graph-group2 {
  fill: $lime;
  stroke: $lime;
}

.vis-graph-group3 {
  fill: $indigo;
  stroke: $indigo;
}

.vis-graph-group4 {
  fill: $teal;
  stroke: $teal;
}

.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
  border-bottom: 2px solid $card-bg;
}

.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
  border-color: $card-bg;
}

.vis-legend {
  display: none!important;
}

HTML

Data Vis Line Chart

html5, chart

编辑器支持Emmet

快捷键

Data Vis Line Chart

html5, chart

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：