Morris.js 折线图来自 json 的多个 ykey

Question

我正在研究 morris.js 折线图。我的 json 是

[
{"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"}
]

从上面json，我对xkey和ykeys有把握了。所以我可以实现下面的代码。

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);`

如果我的 json 可能有超过 2 个 ykey，这将基于来自数据库的数据。我将如何将它绘制到 ykeys？请指教

样本 JSON 将是

[
{"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",....}
]

Answer 1

我做了一个fiddle给你的问题

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

在此，我通过了ykeys

作为

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

因此它将获取所有 y 键跳过时间

Morris.js 折线图来自 json 的多个 ykey

Morris.js line chart multiple ykeys from json

javascript

linechart

morris.js