5

我可以使用setTimeout（在底部，在创建的事件上）使用chart.update.bind(chart).

谁能建议我可以将新数据传递到该图表对象的方法？也许使用原型方法？还是我应该创建一个全新的图表对象并重绘它？

最终，我只想要一个图表，它可以通过漂亮的动画自动更改数据，主要是出于审美目的。

var chart = new Chartist.Line('.ct-chart-main', {
  labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
  series: [
    [1, 4, 5, 12, 4, 3, 2, 4, 5, 1]
  ]
}, {
  low: 0,
  showArea: true,
  fullWidth: true,
  width: '600px',
  height: '250px',
  lineSmooth: Chartist.Interpolation.cardinal({
    tension: 1
  })
});

chart.on('created', function() {
  if(window.__exampleAnimateTimeout) {
    clearTimeout(window.__exampleAnimateTimeout);
    window.__exampleAnimateTimeout = null;
  }
  window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 5000);
});

chart.on('draw', function(data) {
    if(data.type === 'point') {
        var circle = new Chartist.Svg('circle', {
      cx: [data.x], cy:[data.y], r:[5],
    }, 'ct-circle');
    data.element.replace(circle);
    }
  if(data.type === 'line' || data.type === 'area') {

    data.element.animate({
      d: {
        begin: 2000 * data.index,
        dur: 1000,
        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
        to: data.path.clone().stringify(),
        easing: Chartist.Svg.Easing.easeOutQuint
      }
    });
  }
});

chart.on('created', function() {
  if(window.__exampleAnimateTimeout) {
    clearTimeout(window.__exampleAnimateTimeout);
    window.__exampleAnimateTimeout = null;
  }
  window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 5000);
});
4

2 回答 2

5

您应该能够使用以下内容更新图表：

chart.update(newData)

于 2015-11-07T22:30:26.377 回答
1

这是我如何将新数据传递到示例图表的示例：注意，这使用递归来演示概念，使用函数独立删除 setTimout 行。

function updateChart(chart,data,point,length) {
 if(data.series[0].length >= length) {
    data.series[0].shift();
  }
  data.series[0].push(point);
  chart.update(data);
  setTimeout(() => { updateChart(chart,data,getRandomInt(20),length) }, 1000);
}

整个演示代码：

<!DOCTYPE html>
<html>

  <head>
    <style>
      html,
      body {
        margin: 50px;
        padding: 20;
      }

      h2 {
        text-align: center;
      }

    </style>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  </head>

  <body>
    <h2>
      Chartist.js Updating with New Data
    </h2>
    <div class="ct-chart ct-perfect-fourth"></div>
  </body>

</html>

<script>

var data = {
    series: [[5, 4, 3, 7, 5, 10]]
};

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function updateChart(chart,data,point,length) {
 if(data.series[0].length >= length) {
    data.series[0].shift();
  }
  data.series[0].push(point);
  chart.update(data);
  setTimeout(() => { updateChart(chart,data,getRandomInt(20),length) }, 1000);
}

// We are setting a few options for our chart and override the defaults
var options = {
  // Don't draw the line chart points
  showPoint: true,
  // Disable line smoothing
  lineSmooth: false,
  // X-Axis specific configuration
  axisX: {
    // We can disable the grid for this axis
    showGrid: true,
    // and also don't show the label
    showLabel: true
  },
  // Y-Axis specific configuration
  axisY: {
    // Lets offset the chart a bit from the labels
    offset: 60,
    // The label interpolation function enables you to modify the values
    // used for the labels on each axis. Here we are converting the
    // values into million pound.
    labelInterpolationFnc: function(value) {
      return '$' + value + 'm';
    }
  }
};

// All you need to do is pass your configuration as third parameter to the chart function

var cid = new Chartist.Line('.ct-chart', data, options);

 
setTimeout(() => { updateChart(cid, data, getRandomInt(20), 10) }, 1000);

</script>
于 2021-01-13T19:53:12.090 回答