jqPlot - это библиотека для рисования графиков, диаграмм.
jqPlot использует библиотеку
jQuery.
скачать jquery.jqplot.1.0.8r1250.zip
http://www.jqplot.com/download/
пример
http://www.jqplot.com/examples/barTest.php#
Html
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- подключить библиотеку jQuery (js файл) -->
<script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
<!-- подключить библиотеку jqPlot (js файл) -->
<script type="text/javascript" src="https://dir.by/example_lib/jquery.jqplot.1.0.8r1250/jquery.jqplot.js"></script>
<!-- подключить библиотеку jqPlot plugins (js файлы) -->
<script type="text/javascript" src="https://dir.by/example_lib/jquery.jqplot.1.0.8r1250/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="https://dir.by/example_lib/jquery.jqplot.1.0.8r1250/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="https://dir.by/example_lib/jquery.jqplot.1.0.8r1250/plugins/jqplot.pointLabels.js"></script>
<!-- подключить библиотеку jqPlot (css файл) -->
<link rel="stylesheet" type="text/css" href="https://dir.by/example_lib/jquery.jqplot.1.0.8r1250/jquery.jqplot.css" />
<!-- HTML элементы -->
<span id="info1"></span>
<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
<!-- JavaScript наш график -->
<script type="text/javascript">
$(document).ready(function()
{
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</body>
</html>
Ваши Отзывы ... комментарии ...