0
У меня есть несколько кнопок, представляющих веб-службы в виде карт и диаграмм Highcharts, которые пользователь может перетащить в один из нескольких контейнеров (DIV) на странице, где эти веб-службы затем отображается.Как визуализировать график Highcharts в выбранном пользователем DIV
Он отлично подходит для работы с картами/изображениями. Но мне не ясно, как это сделать с помощью диаграмм Highcharts. Я предполагаю, что я должен указать где-то chart.renderTo («DIVx»), но не уверен в этом процессе.
У меня есть установка fiddle here. На данный момент график отображается в контейнере DIV. Но это должно исчезнуть, и как только пользователь перетащит кнопку «Graph :: XXX» в один из DIV, график должен отобразиться там.
HTML-часть:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- this container should disappear -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- buttons -->
<div id="map_npp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: NPP</h4>
</div>
<div id="map_precipitations" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitations</h4>
</div>
<div id="map_temperature" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div id="graph_gdp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Graph :: GDP</h4>
</div>
<div id="graph_xxx" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Graph :: XXX</h4>
</div>
<br clear="all" />
<!-- dropzone DIVs -->
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
JavaScript/JQuery часть для графа:
var csv = "2010/01/01,51.67074582499006,13.789093928493081,-0.0010074468085106377\n" +
"2010/02/01,51.67074582499006,13.789093928493081,0.0024117021276595747\n" +
"2010/03/01,51.67074582499006,13.789093928493081,0.026550000000000004\n" +
"2010/04/01,51.67074582499006,13.789093928493081,0.08252659574468087\n" +
"2010/05/01,51.67074582499006,13.789093928493081,0.12837446808510639\n" +
"2010/06/01,51.67074582499006,13.789093928493081,0.140618085106383\n" +
"2010/07/01,51.67074582499006,13.789093928493081,0.0668787234042553\n" +
"2010/08/01,51.67074582499006,13.789093928493081,0.10335744680851064\n" +
"2010/09/01,51.67074582499006,13.789093928493081,0.08095000000000001\n" +
"2010/10/01,51.67074582499006,13.789093928493081,0.0400159574468085\n" +
"2010/11/01,51.67074582499006,13.789093928493081,0.004214893617021277\n" +
"2010/12/01,51.67074582499006,13.789093928493081,-0.0018680851063829788\n" +
"2011/01/01,51.67074582499006,13.789093928493081,0.0011914893617021279\n" +
"2011/02/01,51.67074582499006,13.789093928493081,0.003752127659574468\n" +
"2011/03/01,51.67074582499006,13.789093928493081,0.027225531914893623"
function extract(csv) {
var rows = csv.split(/\r\n|\n/);
var data;
var series = [];
var serie = {
name: -1,
data: []
};
for (var i = 0; i < rows.length; i++) {
data = rows[i].split(',');
if (serie.name === -1) {
serie.name = data[0].substr(0, 4);
} else {
if (serie.name !== data[0].substr(0, 4)) {
series.push(serie);
serie = {
name: data[0].substr(0, 4),
data: []
};
}
}
serie.data.push(parseFloat(data[3]));
}
series.push(serie);
return series;
}
$(function() {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: extract(csv),
});
});
JavaScript/JQuery часть для перетаскивания кнопок и целевых DIVs:
//just to know which button is being dragged we will use this variable
var draggingDiv;
function onDragOver(e) {
e.preventDefault();
e.target.classList.add("over-me");
}
function onDragLeave(e) {
e.target.classList.add("static");
e.target.classList.remove("over-me");
}
function onDragStart(e) {
draggingDiv = e.target;
e.target.innerHTML = "<h4>You are Dragging me</h4>";
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
e.target.parentElement.classList.add("static");
draggingDiv.innerHTML = "<h4>Dragged once Can't drag me now:)</h4>";
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>";
}
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
//uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
//draggingDiv.draggable=false;
//e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
//e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
if (draggingDiv.id == "map_npp") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "map_precipitations") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "map_temperature") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "graph_gdp") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "graph_xxx") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
}
}
Спасибо за любые подсказки, как это можно реализовать.
Круто. Спасибо! – luftikus143