javascript - 图表 js 在更改 x 轴标签时为线条设置动画

Question

我在这里使用 Jukka Kurkela 示例实现了动画情节。
现在我无法进一步定制这个情节。

自定义绘图的逻辑
绘图开始动画，x 轴标签为 0-20。当绘图达到 20 时，将 x 轴更新为 20-40。递增i或 20 直到 x 轴达到其极限。

如何将上面的逻辑应用到下面的示例中？

    // Generating data
    var data = [];
    var prev = 100;
    for (var i=0;i<200;i++) {
      prev += 5 - Math.random()*10;
      data.push({x: i, y: prev});
    }

    var delayBetweenPoints = 100;
    var started = {};
    var ctx2 = document.getElementById("chart2").getContext("2d");
    var chart2 = new Chart(ctx2, {
      type: "line",
      data: {
        datasets: [
          {
            backgroundColor: "transparent",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
            pointRadius: 0,
            data: data,
            fill: true,
            animation: (context) => {
              var delay = 0;
              var index = context.dataIndex;
              if (!started[index]) {
                delay = index * delayBetweenPoints;
                started[index] = true;
              }
              var {x,y} = index > 0 ? context.chart.getDatasetMeta(0).data[index-1].getProps(['x','y'], 
               true) : {x: 0, y: 100};
              
              return {
                x: {
                  easing: "linear",
                  duration: delayBetweenPoints,
                  from: x,
                  delay
                },
                y: {
                  easing: "linear",
                  duration: delayBetweenPoints * 500,
                  from: y,
                  delay
                },
                skip: {
                  type: 'boolean',
                  duration: delayBetweenPoints,
                  from: true,
                  to: false,
                  delay: delay
                }
              };
            }
          }
        ]
      },
      options: {
        scales: {
          x: {
            type: 'linear'
          }
        }
      }
    });

    <div class="chart">
      <canvas id="chart2"></canvas>
    </div>
    <script src="https://www.chartjs.org/dist/master/Chart.js"></script>

标签： javascripthtmljqueryarrayschart.js

Answer 1

解决了！它不是增加 20 秒，而是提前每 5 秒增加一次。绝对给用户带来更好的体验。

从Rowf Abd 的帖子中获得帮助。

 
  var myData = [];
  var prev = 100;
  for (var i=0;i<60;i++) {
    prev += 5 - Math.random()*10;
    myData.push({x: i, y: prev});
  }

  var ctx = document.getElementById('myChart').getContext('2d');

  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        data: [myData[0]],
        pointRadius: 0,
        fill: false,
        borderColor: "black",
        lineTension: 0
      }]
    },
    options: {
      legend: {
        onClick: (e) => e.stopPropagation() 
      },
      title:{
        fontColor: 'Black'
      },
      layout: {
        padding: {
            right: 10
        }
      },
      scales: {
        xAxes: [{
          type: 'linear',
          ticks: {
          }
        }],
        yAxes: [{
          scaleLabel: {
            // fontFamily: 'Lato',
            fontSize: 19,
            fontColor: "Black"
          }
        }]
       }
    }
  });
  

  var next = function() {
    var data = chart.data.datasets[0].data;
    var count = data.length;
    var xabsmin = 20;
    var xabsmax = 60;
    var incVar = 5;

    data[count] = data[count - 1];
    chart.update({duration: 0});
    data[count] = myData[count];
    chart.update();

    if (count < myData.length - 1) {
      setTimeout(next, 500);
    }
    
    if (data[count].x < xabsmin) {
      
      chart.config.options.scales.xAxes[0].ticks.min = xabsmin - xabsmin;
      chart.config.options.scales.xAxes[0].ticks.max = xabsmin;
      chart.update();

    }
    
    if(data[count].x >= xabsmin && data[count].x < (xabsmax)){
      
      var currentT = parseFloat(data[count].x);
      var modDiv = (currentT % incVar);
      var tempXMax = (currentT) + (incVar - modDiv);

      chart.config.options.scales.xAxes[0].ticks.max = tempXMax;
      chart.config.options.scales.xAxes[0].ticks.min = tempXMax - xabsmin;
      chart.update();

    }
  }

  setTimeout(next, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="myChart"></canvas>