使用morris.js放入多行

Question

我正在尝试用morris.js制作一个图形，我需要在一个图形中表示两条线，我该怎么做呢？

我在一个数组中有两组数据，但是我看不到任何行，如果我放入todos[0]，我可以看到第一行，如果放入todos[1]，我可以看到第二行，但我想同时看到这两行。我想放置超过2行，我将在ajax函数中使用它，但是现在我需要看到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

您需要将每年的值放入相同的对象中。不要忘记将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>

​