2015-04-16 1 views
1

Я ищу бесплатный JavaScript несколько строк диаграммы графа, например:Бесплатный график множественных линий землетрясений в JavaScript?

enter image description here

Одно, что я могу использовать для коммерческого использования.

Я смотрел документацию JqPlot here, но не нашел ничего подобного.

Может ли кто-нибудь направить меня на бесплатный график диаграмм JS с несколькими линиями, который я могу использовать?

Thanks

ответ

3

Вы также можете использовать Google Chart

здесь 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

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]]); 
    }); 
1

Я хотел бы предложить проверить nvd3 что очень хороший и простой в использовании. Вы можете увидеть пример линейной диаграммы here и there.

В качестве альтернативы, Rickshaw может сделать трюк, а также C3.js

Все эти бесплатно, с открытым исходным кодом librairies основаны на d3.js (по-прежнему чисто JavaScript), которые вам не нужно знать, так как они имеют простые API.

Смежные вопросы