将AMCharts项目符号与外部内容滑块链接

我有一个基本的水平内容滑块，并且在活动编辑器中创建了一个非常基本的折线图，并将其复制到我的HTML中。现在的挑战是将图形上的每个项目符号与我的内容滑块中的不同幻灯片链接起来。我知道我必须添加一个eventListener，但我不确定如何将每个项目符号链接到不同的幻灯片。将AMCharts项目符号与外部内容滑块链接

 <div class="sp-slideshow"> 

      <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> 
      <label for="button-1" class="button-label-1"></label> 

      <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> 
      <label for="button-2" class="button-label-2"></label> 

      <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> 
      <label for="button-3" class="button-label-3"></label> 

      <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> 
      <label for="button-4" class="button-label-4"></label> 

      <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> 
      <label for="button-5" class="button-label-5"></label> 

      <label for="button-1" class="sp-arrow sp-a1"></label> 
      <label for="button-2" class="sp-arrow sp-a2"></label> 
      <label for="button-3" class="sp-arrow sp-a3"></label> 
      <label for="button-4" class="sp-arrow sp-a4"></label> 
      <label for="button-5" class="sp-arrow sp-a5"></label> 

      <div class="sp-content"> 
       <div class="sp-parallax-bg"></div> 
       <ul class="sp-slider clearfix"> 
        <li><img src="images/image1.png" alt="image01" /></li> 
        <li><img src="images/image2.png" alt="image02" /></li> 
        <li><img src="images/image3.png" alt="image03" /></li> 
        <li><img src="images/image4.png" alt="image04" /></li> 
        <li><img src="images/image5.png" alt="image05" /></li> 
       </ul> 
      </div><!-- sp-content --> 

     </div><!-- sp-slideshow -->

来源

2015-02-24 Mari

嗨，马里。基本问题：你如何浏览内容滑块？ – gerric 2015-02-24 11:14:04

到内容滑块？在页面本身上的含义？你只需要向下滚动，因为它将是一个页面布局的一个页面。但在这个阶段，这只是一个我正在忙着研究的HTML演示。但通过幻灯片导航，你有箭头“下一个”和“先行”，但我也不想让我的子弹在我的amcharts图表中作为导航工作。如果你能看到我在 – Mari 2015-02-24 11:25:07

处获得的位置，那么假设有“时间轴”的感觉。我不知道这是否可能。我试图在这个阶段为每个幻灯片创建一个不同的类或ID，也许创建一个onclick事件getElementById。不知道我是否在浪费时间。我真的不知道该怎么去做。 – Mari 2015-02-24 11:25:45

我想这应该非常适合您的需要：fiddle。
重要的代码是：

chart.addListener("clickGraphItem", function(e){ 
    alert(e.item.index); // replace with navigation 
});

您必须使用的子弹，否则将无法正常工作。如果你不希望他们被显示使用：bulletAlpha: 0

希望这会有所帮助。 ;）

编辑：
根据你的代码在最后的评论，我会建议使用某种映射。
这使得您的代码更易于阅读和重用。
下面是一个例子：

buttonMap = ["#button-1", "#button-2", "#button-3", ...]; 

chart.addListener("clickGraphItem", function(e) { 
    $(buttonMap[e.item.index]).click(); 
}

来源

2015-02-24 15:31:40 gerric

谢谢你的麻烦，但我认为你理解我错了。 – Mari 2015-02-25 06:26:23

我在我的网站上有一个页面，在这个页面中有一个完整宽度的内容滑块。在这个内容滑块下面，我有我的图表线条聊天，这将有更多的时间线感觉。所以我的标签将会是日期，并且您可以点击日期或项目符号，或者无论内容滑块会移动到与该日期相符的幻灯片中。我希望我可以尝试为你演示一个小提琴，但当代码太多时，jsfiddle会受到惊吓。对不起，你必须认为我是一个痛苦的“背后” – Mari 2015-02-25 06:30:01

这样的事情，除了我的时间线将是一个图表图。 – Mari 2015-02-25 06:32:39

将AMCharts项目符号与外部内容滑块链接

回答

相关问题