javascript - 在莫里斯图中的多条线之间切换

Question

我正在使用莫里斯图和 Angular 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}  
]

我动态地将这个 json 传递到变量“yearly_total”中。

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

Answer 1

我已经找到解决办法了。检查这个 fiddle ... http://jsfiddle.net/4ztbu8oo/4/