多放一行 morris.js

Question

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

我在一个数组中有 2 组数据，但我看不到任何一行，如果我输入 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>

多放一行 morris.js

Put more than one line with morris.js

html

javascript

css

php

morris.js