11.05.2012, 19:52
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
|
Столбцовый график из таблицы
Доброго всем времени суток.
Задача такая: с помощью HTML/CSS + JavaScript(jQuery) нужно сделать график в виде столбиков. График должен генерироваться с помощью JavaScript на основе данных таблицы. Следует выделить минимальное и максимальное значение на графике.
Т.е. есть таблица в которой две строки данных: в одной строке 0,1,2,3...10. В другой: 3.2, 5.8,9.6,7.7, 6.2, 2.1... JavaScript или jquery должен выбрать из таблицы данные и построить столбцы в высоту со значениями из таблицы. (0,1,2,3...10) по Х и (3.2, 5.8,9.6,7.7, 6.2, 2.1) по Y
Надеюсь разъяснил более-менее понятно.
Заранее спасибо за помощь!
|
|
11.05.2012, 19:56
|
 |
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".
Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
|
11.05.2012, 20:00
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
|
Раед,
Ну извините, я и так сам пытаюсь, просто пока никаких мыслей голову не идет. Я не прошу готового решения, хоть варианты за что зацепиться.
|
|
11.05.2012, 20:24
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
$(document).ready(function(){
line1 = [5,7, 9, 17];
line2 = [25, 12, 6, 10];
line3 = [2, 7, 15, 29];
plot2 = $.jqplot('chart', [line1, line2, line3], {
legend:{show:true, location:'ne', xoffset:55},
title:'Диаграмма со столбцами',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{barPadding: 8, barMargin: 20}
},
series:[
{label:'Жирафы'},
{label:'Слоны'},
{label:'Зебры'}
],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['Янв', 'Фев', 'Март', 'Апр']
},
yaxis:{min:0}
}
});
});
результат: http://grigorieff.ru/demo/jqplot/demo4.php
мне бы что-то в этом духе, только из таблицы |
|
11.05.2012, 21:56
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
Все вроде хорошо получается, только если числа загнаны не в таблицу а в массив.
var line1 = [[1, 4.5], [2, 3.1], [3, 6], [4, 2.2], [5, 5.8], [6, 7.7], [7, 11.8], [8, 9.6], [9, 4.1], [10, 7.7],[11, 5.6], [12, 9.6]];
Может кто знает как перебрать ячейки таблицы и сформировать из них такой массив? |
|
11.05.2012, 22:12
|
|
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function(){
var t1=document.getElementById('gt').rows[0].cells;
var t2=document.getElementById('gt').rows[1].cells;
var arr = [];
for (var i=0;i<10;i++) {
arr.push([t1[i].innerHTML,t2[i].innerHTML]);
}
alert(arr.join('; '));
}
</script>
</head><body>
<table id="gt" border="3">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr>
<td>4.5</td><td>3.1</td><td>6</td><td>2.2</td><td>5.8</td><td>7.7</td><td>11.8</td><td>9.6</td><td>4.1</td><td>5.6</td>
</tr>
</TABLE>
</body></html>
|
|
11.05.2012, 22:37
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
|
Раед,
Огромное спасибо за труда. Массив выводится конечно, но увы такой формат вывода не подходит. Нужно именно [value1, value2], [value3, value4]...
Но все-равно, спасибо!
|
|
11.05.2012, 22:47
|
|
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
wizard2014,
Так внутри он и хранится в нужном формате (
|
Сообщение от wizard2014
|
|
var line1 = [[1, 4.5], [2, 3.1], [3, 6], [4, 2.2], [5, 5.8], [6, 7.7], [7, 11.8], [8, 9.6], [9, 4.1], [10, 7.7],[11, 5.6], [12, 9.6]];
|
), вывод это я для демонстрации так сделал.
Соедините свой скрипт с моим и всё получится.
Желаю удачи 
|
|
11.05.2012, 23:26
|
|
Интересующийся
|
|
Регистрация: 11.05.2012
Сообщений: 12
|
|
Раед,
Фух, что-то не выходит! 
Получилось два отдельных скрипта, не могу понять как их соединить!
<script type="text/javascript">
window.onload = function(){
var t1=document.getElementById('gt').rows[0].cells;
var t2=document.getElementById('gt').rows[1].cells;
var arr = [];
for (var i=0;i<=11;i++) {
arr.push([t1[i].innerHTML,t2[i].innerHTML]);
}
var line1 = arr.join('; ');
}
</script>
и
$(document).ready(function(){
var plot1 = $.jqplot('chart', [line1], {
title: 'Столбцовый график',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0, //Наклон символов (значение 0 - под 90 градусов)
fontSize: '14px' //Размер шрифта
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
Но как передать в jQuery эту самую line1 переменную из выше следующего скрипта?
Уже, вот-вот, почти, но никак.
|
|
11.05.2012, 23:55
|
|
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
|
Сообщение от wizard2014
|
|
var line1 = arr.join('; ');
|
Это лишнее
Так?:
$(document).ready(function(){
var t1=document.getElementById('gt').rows[0].cells;
var t2=document.getElementById('gt').rows[1].cells;
var arr = [];
for (var i=0;i<=11;i++) {
arr.push([t1[i].innerHTML,t2[i].innerHTML]);
}
var line1 = arr;
var plot1 = $.jqplot('chart', [line1], {
title: 'Столбцовый график',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0, //Наклон символов (значение 0 - под 90 градусов)
fontSize: '14px' //Размер шрифта
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
|
|
|
|
