jQuery flot: отобразите все данные и парение оси Y
Языки виртуальной машины вряд ли превзойдут скомпилированные языки по характеристикам, но они могут быть рядом достаточно, что это не имеет значения (по крайней мере), по следующим причинам (я говорю за Java здесь, так как я никогда не делал C#).
1/среда выполнения Java обычно может обнаружить части кода, которые часто выполняются и выполняют своевременную (JIT) компиляцию тех разделов так, чтобы в будущем они работали на полной скомпилированной скорости.
2/Обширные части библиотек Java компилируются так, чтобы при вызове библиотечной функции Вы выполнили скомпилированный код, не интерпретируемый. Вы видите код (в C) путем загрузки OpenJDK.
3/, Если Вы не делаете крупные вычисления, большую часть времени Ваша программа, работает, это ожидает входа от очень медленного (собственно говоря) человек.
4/Начиная с большой проверки байт-кода Java сделан во время загрузки класса, нормальные издержки проверок на этапе выполнения значительно уменьшаются.
5/В худшем случае, интенсивный производительностью код можно извлечь к скомпилированному модулю и назвать от Java (см. JNI) так, чтобы он работал в полной скорости.
, Таким образом, байт-код Java никогда не будет превосходить собственный машинный язык по характеристикам, но существуют способы смягчить это. Большое преимущество Java (поскольку я вижу его) ОГРОМНО стандартная библиотека и межплатформенная природа.
1 ответ
Я взял пример turn-series.html с веб-сайта FLOT и сделал несколько изменения. Скопируйте и вставьте следующее в новый файл HTML и запустите его - работает в Firefox, не тестировалось в IE.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<style> #tooltip { font-size:8pt; } </style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Here is an example with real data: military budgets for
various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var datasets = {
"usa": {
label: "USA",
data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
},
"russia": {
label: "Russia",
data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
},
"uk": {
label: "UK",
data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
},
"germany": {
label: "Germany",
data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
},
};
// define an empty array
var data = [];
// use this existing loop...
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
// ... and add this line - so the data array is populated (row by row)
data.push(datasets[key]);
});
// plot the graph with the newly populated data array
$.plot($("#placeholder"), data, {
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 },
grid: { hoverable: true, clickable: true },
points: { show: true },
lines: { show: true },
});
// add some hovering logic to each point...
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
// show the tooltip
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 35,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
</body>
</html>