58 lines
2.7 KiB
HTML
Executable File
58 lines
2.7 KiB
HTML
Executable File
{# Скрипт Google.Chart для рисования графика #}{% block Top_JS3 %}
|
||
<script type="text/javascript" src="https://www.google.com/jsapi" type="text/javascript"></script>{# <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> #}
|
||
<script type="text/javascript">
|
||
// google.charts.load('current', {'packages':['bar']});
|
||
// google.charts.setOnLoadCallback(drawChart);
|
||
google.load("visualization", "1", {packages:["corechart"]});
|
||
google.setOnLoadCallback(drawChart);
|
||
function drawChart() {
|
||
let data = google.visualization.arrayToDataTable([
|
||
["Год", "Введено в эксплуатацию", {role:'style'}],{% for row in DATA4GRAPH %}
|
||
["{{ row.YEAR }}",{{ row.NUMS }},"color: #99{{ row.CLRS }}99"]{% if not forloop.last %},{% endif %}{% endfor %}
|
||
]);
|
||
let view = new google.visualization.DataView(data);
|
||
view.setColumns([0, 1,
|
||
{ calc: "stringify",
|
||
sourceColumn: 1,
|
||
type: "string",
|
||
role: "annotation" },
|
||
2
|
||
]);
|
||
let options = {
|
||
animation:{
|
||
duration: 1500,
|
||
easing: 'in',
|
||
startup: true
|
||
},
|
||
backgroundColor: "#EEEEEE",
|
||
bar: {groupWidth: "76.4%"},
|
||
chartArea: {left: "2%", top: "5%", width: '96%', height: '85%'},
|
||
dataOpacity: 0.76,
|
||
explorer:{
|
||
maxZoomIn: 0.20,
|
||
maxZoomOut: 32 },
|
||
vAxis: {
|
||
baselineColor:'grey',
|
||
gridlines:{color: 'silver', count: 7},
|
||
minorGridlines:{color: '#dddddd', count: 3},
|
||
textPosition: 'in',
|
||
textStyle: {fontSize: 10}
|
||
},
|
||
hAxis: { textStyle: {fontSize: 10} },
|
||
isStacked: true,
|
||
tooltip: {
|
||
textStyle:{color: 'grey', fontSize: 10 },
|
||
trigger: 'selection'
|
||
},
|
||
annotations: {textStyle: { fontSize: 8, bold: true, color: 'black', opacity: 0.8 }},
|
||
legend: { position: "none" }
|
||
};
|
||
let chart = new google.visualization.ColumnChart(document.getElementById("graph"));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>{% endblock %}
|
||
<div id="graph" style="width:100%;height:100%">
|
||
<p>Для отображения гистограммы ввода в эксплуатацию зданий серии {{ THIS_SERIA_NAME }} нужна поддержка SVG.</p>
|
||
<noscript>
|
||
<p>Для визуализации отображения картографической информации с помощью Google.Charts нужно включить поддержку JavaScript.</p>
|
||
</noscript></div> |