jqPlot – jQuery плагин для построения графиков

Статья от 06.06.09 в категории Javascript, jQuery
Теги: Javascript, jqPlot, jQuery

jqPlot это jQuery-плагин, который строит различные виды диаграмм. jqPlot гибко настраиваемый, предлагает многочисленные варианты схемы стилей и форматирования. Этот плагин работает в IE 6 +, Firefox, Safari и Opera.
cover3
Покажем работу плагина на примере.

Подключаем наеобходимые js-файлы:

<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="jquery.jqplot.js"></script>

Задаём необходимые данные и настройки:

  $(document).ready(function(){      
    var l1 = [2, 2, 3, 9, 3];
    var l2 = [8, 1, 5, 6, 8];
    plot1 = $.jqplot('chart', [l1, l2], {
        stackSeries: true,
        grid:{background:'#fefbf3', borderWidth:1},
        seriesDefaults: {fill: true, showMarker: true, shadow: true},
        axes:{xaxis:{pad:1.0, numberTicks:5}},
        series:[{}, {color:'rgba(200, 45, 120, 0.5)'}]
    });
  });

HTML-разметка:

<style type="text/css"> 
  margin-top:20px;  
  margin-left:20px; 
  width:400px;  
  height:270px;
</style>
<div id="chart">
</div>

В итоге мы получим следующий график:
result
Посмотреть примеры Cкачать архив

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery