使用morris.js放入多行

Morris.js 是一个轻量级的 JavaScript 图表库，它允许你在网页上快速创建美观的图表。如果你想在 Morris.js 中放入多行数据，你可以使用其提供的 Morris.Line 方法来实现。

基础概念

Morris.js 的 Line 图表通过连接一系列数据点来显示趋势。你可以为每个数据系列定义一个数组，每个数组代表一条线。

类型

Morris.js 的 Line 图表支持多种类型的数据展示，包括：

时间序列数据
分类数据
比较不同数据系列

应用场景

财务报表：显示收入、支出等随时间变化的趋势。
销售分析：比较不同产品的月销售量。
用户行为分析：展示网站访问量、用户活跃度等数据。

示例代码

以下是一个使用 Morris.js 创建多行 Line 图表的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Morris.js 多行示例</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
</head>
<body>
  <div id="line-chart"></div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
  <script>
    Morris.Line({
      element: 'line-chart',
      data: [
        { y: '2011 Q1', item1: 30, item2: 20 },
        { y: '2011 Q2', item1: 20, item2: 30 },
        // ... 更多数据点
      ],
      xkey: 'y',
      ykeys: ['item1', 'item2'],
      labels: ['Item 1', 'Item 2'],
      lineColors: ['#5cb85c', '#d9534f']
    });
  </script>
</body>
</html>