Question

我可以使用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);
});

Answer 1

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

chart.update(newData)

用新数据更新chartistjs？

1 个答案: