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

Question

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

        <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 项目符号与外部内容滑块链接

Linking AMCharts bullets with an outside content slider

html

amcharts