將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項目符號與外部內容滑塊鏈接

回答

相關問題