Помогите пожалуйста. Я незнаю js, а работу делать надо. Нашел сайт где можно делать диаграммы онлайн. Хотел вставить на страницу две диаграммы, чтобы сворачивать и разворачивать элемент, но никак не выходит. Делал на примере,
<html>
<head>
<title>Показать/скрыть</title>
<style type="text/css">
.showhide{
cursor: pointer;
}
.showhide-all{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/radar.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/themes/dark.js"></script>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.showhide').click(function() {
$('.showhide-all').slideUp(500);
$(this).next('div').filter(function () {return $(this).css('display')=='block'}).slideUp(500);
$(this).next('div').filter(function() {return $(this).css('display')=='none'}).slideDown(500);
});
});
</script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "radar",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "country",
"radius": "25%",
"startDuration": 2,
"handDrawScatter": 7,
"percentPrecision": 3,
"theme": "dark",
"graphs": [
{
"balloonText": "[[value]] litres of beer per year",
"bullet": "round",
"id": "AmGraph-1",
"valueField": "litres"
}
],
"guides": [],
"valueAxes": [
{
"axisTitleOffset": 20,
"id": "ValueAxis-1",
"minimum": 0,
"position": "right",
"axisAlpha": 0.15
}
],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": [
{
"country": "Транспорт",
"litres": "3"
},
{
"country": "Санитарные нормы",
"litres": "3"
},
{
"country": "Фитосанитарные нормы",
"litres": "3.5"
},
{
"country": "Сертификация",
"litres": "4"
}
]
}
);
</script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv1",
{
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
}
]
}
);
</script>
</head>
<body>
<div class="showhide">Показать/скрыть 1</div>
<div class="showhide-all">
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>
</div>
<div class="showhide">Показать/скрыть 2</div>
<div class="showhide-all">
<div id="chartdiv1" style="width: 100%; height: 400px; background-color: #282828;" ></div>
</div>
<div class="showhide">Показать/скрыть 3</div>
<div class="showhide-all">
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
</div>
<div class="showhide">Показать/скрыть 4</div>
<div class="showhide-all">
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
</div>
</body>
</html>
