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

【问题标题】：Add Animation effect on Morris Chart在莫里斯图上添加动画效果
【发布时间】：2019-08-10 17:43:42
【问题描述】：

我已经使用 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>

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

【问题讨论】：

你能在这里或CodeSandbox创建一个工作示例吗？

标签： javascript php css html morris.js

【解决方案1】：

我在这里解释如何用莫里斯图制作动画效果：how to animate morris bar chart?

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

【讨论】：