Morris.js line chart multiple ykeys from json

冷暖自知 提交于 2020-05-02 03:52:31

问题


I am wokring on morris.js line chart. My json is

[
{"uma":"34","time":"2017-05-11 12:30","mahes":"23","karan":"56"},
{"uma":"45","time":"2017-05-11 12:35","mahes":"45","karan":"56"},
{"uma":"34","time":"2017-05-11 12:38","mahes":"54","karan":"56"}
]

from the above json, I am sure about xkey and ykeys. so I can implement to the below code.

var stringify=JSON.stringify(abovejson);

        var data =stringify,
                  config = {
                    data: JSON.parse(data),
                    xkey: 'time',
                    ykeys: ['uma','mahes','karan'],
                    labels: ['temperature'],
                    fillOpacity: 0.6,
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointFillColors:['#ffffff'],
                    pointStrokeColors: ['black'],
                    lineColors:['green']
                };
              config.element = 'morris-area-chart-exm';
              Morris.Line(config);`

If my json may have more than 2 ykeys which will be based on the data comes from database. How will i plot it to ykeys?? Please advice.

Sample JSON will be

[
{"uma":"34","time":"2017-05-11 12:30","mahes":"23","karan":"56","janu":"23",....},
{"uma":"45","time":"2017-05-11 12:35","mahes":"45","karan":"56","janu":"56",....},
{"uma":"34","time":"2017-05-11 12:38","mahes":"54","karan":"56","janu":"67",....}
]

回答1:


I have made a fiddle for you question

http://jsfiddle.net/athulnair/edwsgj8g/

In this, I passed the ykeys

as

var yvalues = Object.keys(jsonData[0]).filter(i=>i!='time');

So it will fetch all the y key skipping time



来源:https://stackoverflow.com/questions/43936278/morris-js-line-chart-multiple-ykeys-from-json

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!