Question

我看到Chartist线图（http://gionkunz.github.io/chartist-js/examples.html#example-line-path-animation）的动画，但没有一条线从左到右依次抽出。这可能吗？

Answer 1

不是我的solution，但它似乎可以做你想要的。

HTML

<div class="ct-chart ct-golden-section"></div>

CSS

$color1: #ada8b6; //rgba(173, 168, 182, 100)
$color2: #ffeedb; //rgba(255, 238, 219, 100)
$color3: #4c3b4d; //rgba(76, 59, 77, 100)
$color4: #a53860; //rgba(165, 56, 96, 100)
$color5: #61c9a8; //rgba(97, 201, 168, 100)

body {
  width: 100vw;
  height: 100vh;
  background: #111;
}

.ct-chart {
  width: 90vw;
  max-width: 1100px;
  height: 375px;
  margin: 5vh 6.5vw;
  svg {
    width: 100%;
  }
}

.ct-grids line {
  stroke: $color3;
  opacity: 0.4;
}

.ct-labels span {
  color: $color3;
}

@mixin pathseries($length, $delay, $strokecolor) {
  stroke-dasharray: $length;
  stroke-dashoffset: $length;
  animation: draw 1s $delay ease both;
  fill: none;
  stroke: $strokecolor;
  opacity: 0.8;
}

.ct-series-a {
  @include pathseries(1093, 0s, $color1);
}

.ct-series-b {
   @include pathseries(1665, 0.25s, $color5);
}

.ct-series-c {
   @include pathseries(1644, 0.5s, $color2);
}

.ct-series-d {
  @include pathseries(1540, 0.75s, $color4);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

JS

new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    [11, 12, 13, 11, 12, 10, 11, 10],
    [12, 11, 17, -1, 0, 18, -2, 8],
    [0, 8, 12, 1, 15, 3, 18, 1],
    [3, 2, 12, 15, 16, 3, 18, -3]
  ]
}, {
  high: 20,
  low: -3,
  fullWidth: true,
  // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
  axisY: {
    onlyInteger: true,
    offset: 20
  }
});

setTimeout (
  function() { 
    var path = document.querySelector('.ct-series-a path');
    var length = path.getTotalLength();
    console.log(length);
  }, 
3000);

Chartist折线图可以从左到右动画吗？

1 个答案: