Javascript AMCharts通过ID引用图形不工作

Javascript AMCharts referencing graph via ID not working

本文关键字：图形 工作 引用 ID AMCharts 通过 Javascript      更新时间：2023-09-26

使用AMCharts可以通过css选择单个图形进行编辑。如果你给图形一个id，你应该看到类选择器

amcharts-graph-[id]
例如

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

然而，这并不总是以同样的方式工作，我没有看到区别。有人能帮我吗?

为了澄清，我在这里有完全相同的代码的例子。第一个是显示类(您可以通过css引用它)，第二个不是。

  1. 官方演示AMCharts: http://www.amcharts.com/demos/intraday-data/
  2. 完全相同的演示打开在codepen(通过点击编辑在第一个链接，然后在codepen打开)http://codepen.io/anon/pen/mJoaNB

当您检查图的元素(绿线)时，您会看到差异。在codependency示例中(以及我在服务器上的所有测试中)，该行的class属性缺失。

如果你复制和粘贴完全相同的css代码，演示(通过点击编辑)和codependency示例，你会看到更多的差异:第一个会让线变缓，第二个不会——但有什么区别呢?

#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%;
  }
}

你是正确的amCharts应用类名与对象的id。您错过的是，它不是默认启用的。

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

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

下面是相同的演示，上面的应用，动画工作如预期:

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

相关文章：