Question

我正在寻找一个免费的JavaScript多线图表图表，如下所示：

enter image description here

我可以用于商业用途的一种。

我查看了JqPlot文档here，但没有找到类似的内容。

任何人都可以指引我使用免费的JS多线图表吗？

由于

Answer 1

您也可以使用Google图表

这里是js Bin

  google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
  
  </script>
</head>
<body>
  <div id="linechart_material"></div>
</body>

</html>

帮助链接https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Material

Answer 2

jqPlot能够满足您的需求。线图采用数组数组，每个数组代表一个单独的行：

http://codepen.io/anon/pen/WbVLVq

  $(document).ready(function(){
      var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5], [50,1,21,4,3,6,8,5]]);
  });

Answer 3

我建议查看nvd3，它非常好用且易于使用。您可以看到折线图示例here和there。

或者，Rickshaw可以做到这一点，以及C3.js

所有这些免费的开源库都基于d3.js（仍然是纯粹的Javascript），你不需要知道，因为它们有简单的API。

JavaScript中的免费地震多线图？

3 个答案: