Question

我有一个基本的水平内容滑块，我有一个非常基本的折线图，我在实时编辑器中创建并只是复制到我的HTML中。现在的挑战是将图表上的每个项目符号与我的内容滑块中的不同幻灯片相关联。我知道我必须添加一个eventListener，但我不确定如何将每个项目符号链接到另一个幻灯片。

        <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 -->

Answer 1

我认为这应该非常适合您的需求：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();
}

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

1 个答案: