点击图例以在flot中切换系列

时间:2014-04-15 05:52:02

标签: javascript jquery flot

我一直试图通过点击图例来打开/关闭系列,我无法在JSON.parse()之后使其工作。如果我执行JSON.stringify(obj[0])我在引号中有数据并且图表没有填充。我错过了什么,这应该很容易,我错过了一些非常愚蠢的东西。

  

{ “棒”:{ “顺序”:1}, “标签”:“XXX   “,”“data”:“[[1364792400000,9131],[1367384400000,6753],   [1370062800000,7256],[1372654800000,5548],[1375333200000,6817],   [1378011600000,6402],[1380603600000,7470],[1383282000000,6580],   [1385877600000,5908],[1388556000000,5908],[1391234400000,6645],   [1393653600000,6194]]“}

<DIV id="flotchart" style="height: 300px; width: 100%; overflow: hidden;"></DIV>
<DIV id="flotlegend"></DIV>

data = [{"bars":{"order":1},"label":"xxx","data":[[1364792400000,9131],[1367384400000,6753],[1370062800000,7256],[1372654800000,5548],[1375333200000,6817],[1378011600000,6402],[1380603600000,7470],[1383282000000,6580],[1385877600000,5908],[1388556000000,5908],[1391234400000,6645],[1393653600000,6194]]},{"bars":{"order":2},"label":"yyy","data":[[1364792400000,2],[1367384400000,2],[1370062800000,1],[1372654800000,1],[1375333200000,4],[1378011600000,2],[1380603600000,4],[1383282000000,8],[1385877600000,0],[1388556000000,12],[1391234400000,10],[1393653600000,67]]}]

function drawGraph() {
var options = {
        legend: {container: jQuery('flotLegend')},
        xaxis: {mode: "time", timeformat: "%m-%y"},
        yaxis: {min:0, minTickSize: 1},
        grid: {hoverable: true},
        series: {
                    bars: { show: true, barWidth: 24*60*60*1000*10, fill: 1, align: "center", lineWidth: 0, fill: true},
                    shadowSize: 3
                }
        };
jQuery.plot(flotchart, data, options);
}

jQuery('#flotlegend tbody tr td').on('click', function(e) {
        e.preventDefault();
        legend = jQuery(this).html();
        try {
            obj = jQuery.parseJSON(data);
            console.log(obj)
            if(obj[0].label == legend) {
                 data = JSON.stringify(obj[0]);
                 drawGraph();
            }
        } catch(e){
            console.log(e);
        }
    });

jsfiddle

1 个答案:

答案 0 :(得分:0)

尝试:

jQuery('#flotlegend').on('click', 'tbody tr td' , function(e) {
    e.preventDefault();
    // Rest of your code here
});
相关问题