在莫里斯图表上添加动画效果

时间:2019-03-20 05:01:26

标签: javascript php css html5 morris.js

我已经使用Morris JS创建了图表。目前,图表只是在屏幕上加载而没有任何效果。我想通过向其中添加动画效果来使图表更加有趣。

这是我的脚本:

<script>
 Morris.Area({
  element: 'chart',
  // json_encode returns JSON representation of a value
  data: <?php echo json_encode($json_data,JSON_UNESCAPED_UNICODE)?>,
  xkey: 'label',
  ykeys: ['value'],
  // Set to false to skip time/date parsing for X values, instead treating 
 them as an equally-spaced series.
  parseTime:false,
  labels: ['<b>Registered Users</b>'],
   pointFillColors: ['#6789ab'],
 pointStrokeColors: ['#112233'],
 lineColors: ['#a9b4d6'],
  resize: true
  });
</script>

我知道这将在CSS的帮助下完成,但我不知道该如何说服程序。

我正在使用的Div框是:

<div id="chart"></div>

但是我只希望图表显示动画效果

1 个答案:

答案 0 :(得分:0)

我在这里说明如何使用莫里斯图制作动画效果:how to animate morris bar chart?

这需要进行一些更改。好消息是您可以使用包含以下更改的我的fork :):https://pierresh.github.io/morris.js/