Question

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

amcharts-graph-[id]

例如

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

然而，这并不总是以同样的方式工作，我不会看到差异。任何人都可以帮助我吗？

为了澄清我在这里使用完全相同的代码示例。第一个是显示类（你可以通过css引用它），第二个不是。

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

当您检查图表元素（绿线）时，您会看到不同之处。 codepen示例中缺少该行的class属性（以及我服务器上的所有测试中）。

如果你复制并粘贴完全相同的css代码，演示（通过点击编辑）和codepen示例，你会发现更多的差异：第一个将缓和线，第二个赢了 - 但有什么区别？

#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。您错过的是默认情况下未启用。

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

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

这是相同的演示，上面应用的动画按预期工作：

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

Javascript AMCharts通过ID引用图表无法正常工作

1 个答案: