用 morris.js 放多行

Question

我正在嘗試使用 morris.js 制作圖表，我需要在圖表中表示 2 條線，我該怎么做？

我在一個數組中有 2 組數據，但我看不到任何行，如果我放todos[0] ，我可以看到第一行和todos[1]第二行，但我想看到他們兩個. 我想放2行以上，我會用這個和ajax function，但是現在我需要看2行，我該怎么辦？ 我不知道如何看到這兩條線。

 var datos = [ { year: 2008, value: 20 }, { year: 2009, value: 10 }, { year: 2010, value: 5 }, { year: 2011, value: 5 }, { year: 2012, value: 20 } ]; var total = []; var cont = 0; while (cont < 100) { var nuevo = Math.floor(Math.random() * 6000) * cont; var nuevoYear = 2012 + cont //console.log(nuevoYear); datos.push({ year: nuevoYear, value: String(nuevo), }); cont++; } total.push(datos); var datos2 = [ { year: 2008, value: 120 }, { year: 2009, value: 110 }, { year: 2010, value: 51 }, { year: 2011, value: 51 }, { year: 2012, value: 201 } ]; var cont2 = 0; while (cont2 < 100) { var nuevo = Math.floor(Math.random() * 6000) * cont2; var nuevoYear = 2012 + cont2 //console.log(nuevoYear); datos2.push({ year: nuevoYear, value: String(nuevo), }); cont2++; } total.push(datos2); //console.log([total]); new Morris.Line({ // ID of the element in which to draw the chart. element: 'myfirstchart', // Chart data records -- each entry in this array corresponds to // a point on the chart. data: total[0], // The name of the data record attribute that contains x-values. xkey: 'year', // A list of names of data record attributes that contain y-values. ykeys: ['value'], // Labels for the ykeys -- will be displayed when you hover over // the chart. labels: ['Value'] });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> <div class="container todo my-5"> <div class="contDiv"> <div id="myfirstchart" style="height: 250px;"></div> </div> </div>

Answer 1

您需要每年將您的值放在同一個 object 中。 不要忘記將parseTime設置為false以防止 Morris 解釋日期。

請嘗試以下代碼段：

 var datos = [ { year: 2008, v1: 20, v2: 120 }, { year: 2009, v1: 10, v2: 110 }, { year: 2010, v1: 5, v2: 51 }, { year: 2011, v1: 5, v2: 51 }, { year: 2012, v1: 20, v2: 201 } ]; var cont = 0; while (cont < 100) { var nuevo1 = Math.floor(Math.random() * 6000) * cont; var nuevo2 = Math.floor(Math.random() * 6000) * cont; var nuevoYear = 2012 + cont datos.push({ year: nuevoYear, v1: String(nuevo1), v2: String(nuevo2), }); cont++; } new Morris.Line({ element: 'myfirstchart', data: datos, xkey: 'year', ykeys: ['v1', 'v2'], labels: ['Value 1', 'Value 2'], parseTime: false });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> <div> <div id="myfirstchart"></div> </div>

新版本，基於評論：

 var startYear = 2008; var years = 5; var data = []; var labels = []; var ykeys = []; for (var i = startYear; i < startYear + years; i++) { var obj = {}; obj["year"] = i; for (var j = 0; j < 4; j++) { obj["v" + (j + 1)] = Math.floor(Math.random() * 6000) * (j + 1); if (i == startYear) { labels.push("Value " + (j + 1)); ykeys.push("v" + (j + 1)); } } data.push(obj); } new Morris.Line({ element: 'myfirstchart', data: data, xkey: 'year', ykeys: ykeys, labels: labels, parseTime: false });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> <div> <div id="myfirstchart"></div> </div>