Question

Jquery,Highcharts做的动态图表，点击某个图表如何改变图表的显示位置？

如图我点击左面的一个小图之后它会在右面大的区域显示，同时右面的大图在点击的那个小图的位置显示，也就是说点击哪个小图，该小图和大图互换位置！

Answer 1

你可以使用jquery直接实现。
首先，存放三个统计图形的div都设置上id
设置点击某个id的时候，将该id的html和目标id的html互换（先试试这样行不行，有可能操作之后不能保持统计表的效果，那就换成clone后互换）

或者你可是采用修改css来控制。设置三个统计表外面的大层position:relative;三个统计表的层均为position:absolute;并设置好left和top让三者位置固定下来。绑定click事件，修改对应div的css即可。这种方法应该效率更高。

希望对你有帮助。

追问

谢谢你！现在有点思路了，再问一下怎么给不同的div绑定不同的事件啊？怎么写？

怎么根据点的DIV为不同触发不同的事件？

追答

首先你设置好三个div的css分别为 layer1、 layer2、 layer3

你可以设置三个div有一个同样的classname

<div id="container" class="click layer1">
<div id="container1" class="click layer2"></div>
<div id="container2" class="click layer3"></div>

 

用一个全局数组来记录三个层的状态

var init_arr = {"container":{“state”:0,"class0":"layer1","class1":"layer3","bind":"container3"},"container1":{“state”:0,"class0":"layer2","class1":"layer3","bind":"container3"},"container2":{“state”:0,"class0":"layer3","class1":"layer1","bind":"container1"}}

代码太多，你回复一下，我继续粘贴

追问

谢谢！

追答

$(".click").click(fucntion(){
    //更新点击的div
    var id = $(this).attr("id");
    var temp = init_arr[id]["state"];
    init_arr[id]["state"] =  1- init_arr[id]["state"];
    $(this).removeClass(init_arr[id]["class"+temp]).addClass(init_arr[id]["class"+init_arr[id]["state"] ]);
    //更新联动的div
    var id = init_arr[id]["bind"];
    var $bind = $("#"+id);
    var temp = init_arr[id]["state"];
    init_arr[id]["state"] =  1- init_arr[id]["state"];
    $bind.removeClass(init_arr[id]["class"+temp]).addClass(init_arr[id]["class"+init_arr[id]["state"] ]);
});

没有测试，你试试看行不。应该还可以优化，你好好思考一下吧。

追问

非常感谢，但是加上下面的代码图表都不显示了你能看看是什么问题吗？

追答

你把文件发给我看看吧，qq邮箱914761095