【问题标题】:Do not show animations on C3.js Donut chart不要在 C3.js 圆环图上显示动画
【发布时间】:2016-03-04 14:57:16
【问题描述】:

我在使用 C3.js 关闭动画时遇到了一些问题。鼠标悬停在 C3.js 圆环图上时是否可以删除动画?

我将持续时间设置为 0,但它不起作用 - 当鼠标悬停在图表上时,仍然会制作动画。

例如:https://jsfiddle.net/4ff8vnx4/1/

这是我的代码:

var chartDonut1 = c3.generate({
  bindto: "#chart1",
  data: {
            type: 'donut',
            json: [
                {"Parfait": 190},
                {"Bien": 120},
                {"Trop court": 32},
                {"Trop long": 22}
            ],
            keys: {
                value: ['Parfait', 'Bien', 'Trop court', 'Trop long']
            },
            names: {
                'Parfait': 'Parfait (entre 50 \340 60 car.)',
                'Bien': 'Bien (entre 40 \340 49 ou  61 \340 69 car.)',
                'Trop court': 'Trop court (inf\351rieur \340 40 car.)',
                'Trop long': 'Trop long (sup\351rieur \340 79 car.)'            
            }
  },
  transition:  {duration: 0}
});

【问题讨论】:

    标签: javascript animation d3.js c3.js


    【解决方案1】:

    你应该看看 C3.js 的reference guide。您想要的是禁用交互。您可以通过在配置对象中添加以下 sn-p 来实现。

    interaction: {
        enabled: false
    }
    

    【讨论】:

    • 当此选项设置为 false 时,所有交互(显示/隐藏工具提示、选择、鼠标事件等)都将被禁用。我想禁用动画,而不是交互,尤其是显示/隐藏工具提示。
    • @LeMoussel 这是不可能的。您可以启用或禁用交互,但不仅可以禁用动画。
    【解决方案2】:

    使用expand 选项部分禁用动画。

    donut: {
        expand: false
    }
    

    更新了我的例子:https://jsfiddle.net/4ff8vnx4/7/

    【讨论】:

      猜你喜欢
      • 2016-07-29
      • 2015-09-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-07
      相关资源
      最近更新 更多