JavaScript 中的免费地震多线图？

Question

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

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

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

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

谢谢

Answer 1

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 2

我建议查看 nvd3 which is very good and easy to use. You can see a line chart example here and there。

或者，Rickshaw can do the trick, as well as C3.js

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

Answer 3

你也可以使用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>

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

JavaScript 中的免费地震多线图？

Free earthquake multiple line graph in JavaScript?

javascript

jquery

jqplot