Question

是否可以自动平滑折线图的数据，以便显示为优美的曲线，而不是锯齿状的上下线？或者我是否需要手动操作我的数据？

编辑添加了锯齿线图

的示例

<!DOCTYPE html>
<html>

<head>
  <title>Network Technology</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/script.js"></script>

</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
      <a class="navbar-brand text-dark" href="#">
        <img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
      </a>
      <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Solutions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="row v-align position-static">
      <div class="col-sm-6 col-md-8 fl-row">
        <div class="f-row">
          <p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 fl-row">
        <i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
      </div>
    </div>
    <div class="row  v-align">
      <div class="col-md-4 s-row s-row-box">
        <i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
      </div>
      <div class="col-md-8 s-row text-center">
        <h1> Welcome to WEBSITE</h1>
        <p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
        <button type="button" class="btn btn-info">Learn About Us</button>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-md-12">
        <h2> Solutions</h2>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">cloud_done</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">wifi</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">code</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">touch_app</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">security</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">local_phone</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-12">
        Animated background (xterra solution reference)
      </div>
    </div>
    <div class="row v-align2 text-light">
      <div class="col-sm-6 t-row">
        <h2>| Contact Us</h2>
        <form>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="col-sm-6 t-row text-light">
        <div class="contact-box">
          <i class="material-icons">local_phone</i><a href="tel:">PHONE NUMBER HERE</a><br />
          <i class="material-icons">email</i><a href="mailto:">CONTACT EMAIL HERE</a>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-sm-4 fl-row text-light">
        Services
      </div>
      <div class="col-sm-4 fl-row text-light">
        Company
      </div>
      <div class="col-sm-4 fl-row text-light">
        Address
      </div>
    </div>
  </div>


</body>


</html>

Answer 1

SciChart通过自定义系列支持一种样条插值。你可以在这里看到一个例子：

iOS Custom Series Spline Line Example

这需要创建自定义系列（上面的示例中提供了完整的源代码，还有hosted on GitHub here。）

不幸的是，没有简单的样条打开或关闭＆＃39;按钮，但似乎有可能。

使用SCIChart平滑线数据

1 个答案: