Javascript AMCharts 通过 ID 引用图表无效

Question

使用 AMCharts 可以 select 单个图形通过 css 进行编辑。如果您给图形一个 ID，您应该会看到 class select 或

amcharts-graph-[id]

例如

<g transform="translate(0,0)" class="amcharts-graph-smoothedLine amcharts-graph-g1">

然而，这并不总是以同样的方式工作，我看不出有什么不同。谁能帮帮我？

为澄清起见，我在此处提供了具有完全相同代码的示例。第一个显示 class（您可以通过 css 引用它）第二个不是。

AMCharts 的官方演示：http://www.amcharts.com/demos/intraday-data/
在 codepen 中打开完全相同的演示（通过单击第一个 link 上的编辑，然后在 codepen 中打开）http://codepen.io/anon/pen/mJoaNB

当您检查图表的元素（绿线）时，您会看到差异。该行的 class 属性在 codepen 示例中丢失（在我的服务器上的所有测试中也是如此）。

如果您在演示（通过单击编辑）和代码笔示例中复制并粘贴完全相同的 css 代码，您会看到更多差异：第一个会缓和线，第二个不会 - 但有什么区别？

#chartdiv {
    width   : 100%;
    height  : 500px;
}       

.amcharts-graph-g1 .amcharts-graph-stroke {
  stroke-dasharray: 1000%;
  -webkit-animation: css-effect 10s ease-out forwards;
      animation: css-effect 10s ease-out forwards;
}

@-webkit-keyframes css-effect {
  0% {
    stroke-dashoffset: 1000%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}
@keyframes css-effect {
  0% {
    stroke-dashoffset: 1000%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

Answer 1

关于 amCharts 应用带有对象 ID 的 class 名称，你是对的。您错过的是默认情况下未启用它。

要启用此功能，您需要在图表配置中将 addClassNames 设置为 true。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "stock",
  "addClassNames": true,
  // ...
} );

这是相同的演示，应用了上述内容，动画按预期工作：

http://codepen.io/team/amcharts/pen/89720c7ca5b05e8ad8cea239a6fec30e/

Javascript AMCharts 通过 ID 引用图表无效

Javascript AMCharts referencing graph via ID not working

html

javascript

css

amcharts