在莫里斯图表中的多行之间切换

时间:2015-04-28 12:24:03

标签: javascript angularjs toggle morris.js

我正在使用morris图表和角度js。我正在为不同的值绘制三条线。我想使用三个复选框,以便仅在选中相应的复选框时才显示该行。未选中的行应隐藏在图表中。 这是图表的div容器: -

 <div
                    line-chart
                    line-data='yearly_total'
                    line-xkey='y'
                    line-ykeys='["a", "b","c"]'
                    line-labels='["A", "B","C"]'
                    line-colors='["Blue", "Green","red"]'

                    >
               </div>

这是我正在使用的json对象的示例: -

    [
    { "y": "1.", "a": 100, "b": 90,"c":30 },
    { "y": "2.", "a": 75,  "b": 65 ,"c":50},
    { "y": "3.", "a": 50,  "b": 40 ,"c":20},
    { "y": "4.", "a": 75,  "b": 65 ,"c":50},
    { "y": "5.", "a": 50,  "b": 40 ,"c":60},
    { "y": "6.", "a": 75,  "b": 65 ,"c":40},
    { "y": "7.", "a": 100, "b": 90 ,"c":80},
    { "y": "8.", "a": 100, "b": 90,"c":30 },
    { "y": "9.", "a": 75,  "b": 65 ,"c":50},
    { "y": "10.", "a": 50,  "b": 40 ,"c":20},
    { "y": "11.", "a": 75,  "b": 65 ,"c":50},
    { "y": "12.", "a": 50,  "b": 40 ,"c":60}  
]

我在变量&#39; annual_total&#39;中传递了这个json。动态。

有没有办法只显示选定的行?请帮帮我...

1 个答案:

答案 0 :(得分:4)

我找到了解决方案。检查这个小提琴... http://jsfiddle.net/4ztbu8oo/4/