我有一个用flot绘制的图表。当有人将鼠标悬停在文本上时,我想更改数据图的颜色。目前,每当我需要突出显示一些东西时,我都会通过重新绘制整个图表来做到这一点。这是相当慢的(对于简单的图表,大约30毫秒,对于更复杂的图表,多达100毫秒)。既然我只想改变颜色,有没有更快的解决方案?
发布于 2010-05-12 06:39:04
您可以立即采取一些步骤来优化Flot的绘制过程。如果不需要图形上的点,则将其关闭,这可以显著减少绘制时间。还应通过将shadowSize
选项设定为0来禁用阴影,以提高速度。
除了这两个调整之外,您还必须更改flot源代码,以便能够单独突出显示一个系列。我已经创建了一个补丁来做这件事,还有一个小插件,允许你自动或手动突出显示series。补丁和插件的比重新绘制整个图形快三倍,实际上也消除了取消高亮显示一个系列所需的时间,因为它使用了flot的“叠加”功能。
下面有一个jquery.flot.js的补丁和highlightSeries插件的源代码,我已经创建了一个demonstration page,它可以让你看到不同设置之间的差异以及补丁/插件组合。
Flot补丁
--- .\jquery.flot.js
+++ .\jquery.flot.js
@@ -147,6 +147,7 @@
plot.setData = setData;
plot.setupGrid = setupGrid;
plot.draw = draw;
+ plot.drawSeries = drawSeries;
plot.getPlaceholder = function() { return placeholder; };
plot.getCanvas = function() { return canvas; };
plot.getPlotOffset = function() { return plotOffset; };
@@ -164,6 +165,7 @@
plot.highlight = highlight;
plot.unhighlight = unhighlight;
plot.triggerRedrawOverlay = triggerRedrawOverlay;
+ plot.drawOverlay = drawOverlay;
plot.pointOffset = function(point) {
return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left),
top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) };
@@ -1059,7 +1061,7 @@
drawGrid();
for (var i = 0; i < series.length; ++i)
- drawSeries(series[i]);
+ drawSeries(series[i], ctx);
executeHooks(hooks.draw, [ctx]);
@@ -1265,16 +1267,16 @@
placeholder.append(html.join(""));
}
- function drawSeries(series) {
+ function drawSeries(series, ctx) {
if (series.lines.show)
- drawSeriesLines(series);
+ drawSeriesLines(series, ctx);
if (series.bars.show)
- drawSeriesBars(series);
+ drawSeriesBars(series, ctx);
if (series.points.show)
- drawSeriesPoints(series);
+ drawSeriesPoints(series, ctx);
}
- function drawSeriesLines(series) {
+ function drawSeriesLines(series, ctx) {
function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
var points = datapoints.points,
ps = datapoints.pointsize,
@@ -1522,7 +1524,7 @@
ctx.restore();
}
- function drawSeriesPoints(series) {
+ function drawSeriesPoints(series, ctx) {
function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) {
var points = datapoints.points, ps = datapoints.pointsize;
@@ -1675,7 +1677,7 @@
}
}
- function drawSeriesBars(series) {
+ function drawSeriesBars(series, ctx) {
function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
var points = datapoints.points, ps = datapoints.pointsize;
@@ -1942,7 +1944,7 @@
if (hi.series.bars.show)
drawBarHighlight(hi.series, hi.point);
- else
+ else if (hi.series.points.show)
drawPointHighlight(hi.series, hi.point);
}
octx.restore();
highlightSeries插件
/*
Flot plugin for highlighting series.
highlightSeries: {
autoHighlight: true (default) or false
, color: color
}
If "autoHighlight" is true (the default) and the plot's "hoverable" setting is true
series are highlighted when the mouse hovers near an item.
"color" is the color of the highlighted series (default is "red").
The plugin also adds two public methods that allow you to highlight and
unhighlight a series manually by specifying a series by label, index or object.
- highlightSeries(series, [color])
- unHighlightSeries(series)
*/
(function ($) {
var log = (function () {
var out = $("#out");
return function () {
if (!arguments) { return; }
var msg = Array.prototype.slice.call(arguments).join(" ");
if (!out.length) {
out = $("#out");
}
if (out.length) {
out.text(msg);
}
};
})();
var options = {
highlightSeries: {
autoHighlight: true
, color: "black"
, _optimized: true
, _debug: false
}
};
function init(plot) {
var highlightedSeries = {};
var originalColors = {};
function highlightSeries(series, color) {
var
seriesAndIndex = getSeriesAndIndex(series)
, options = plot.getOptions().highlightSeries;
series = seriesAndIndex[1];
highlightedSeries[seriesAndIndex[0]] = series;
originalColors[seriesAndIndex[0]] = series.color;
series.color = color || options.color;
if (options._debug) { var start = new Date(); }
if (options._optimized) {
if (plot.drawOverlay && options._debug) {
plot.drawOverlay();
}
else {
plot.triggerRedrawOverlay();
}
}
else {
plot.draw();
}
if (options._debug) {
log("Time taken to highlight:", (new Date()).getTime() - start.getTime(), "ms");
}
};
plot.highlightSeries = highlightSeries;
function unHighlightSeries(series) {
var
seriesAndIndex = getSeriesAndIndex(series)
, options = plot.getOptions().highlightSeries;
seriesAndIndex[1].color = originalColors[seriesAndIndex[0]];
if (options._debug) { var start = new Date(); }
if (options._optimized) {
delete highlightedSeries[seriesAndIndex[0]];
if (plot.drawOverlay && options._debug) {
plot.drawOverlay();
}
else {
plot.triggerRedrawOverlay();
}
}
else {
plot.draw();
}
if (options._debug) {
log("Time taken to un-highlight:", (new Date()).getTime() - start.getTime(), "ms");
}
};
plot.unHighlightSeries = unHighlightSeries;
plot.hooks.bindEvents.push(function (plot, eventHolder) {
if (!plot.getOptions().highlightSeries.autoHighlight) {
return;
}
var lastHighlighted = null;
plot.getPlaceholder().bind("plothover", function (evt, pos, item) {
if (item && lastHighlighted !== item.series) {
for(var seriesIndex in highlightedSeries) {
delete highlightedSeries[seriesIndex];
}
if (lastHighlighted) {
unHighlightSeries(lastHighlighted);
}
lastHighlighted = item.series;
highlightSeries(item.series);
}
else if (!item && lastHighlighted) {
unHighlightSeries(lastHighlighted);
lastHighlighted = null;
}
});
});
function getSeriesAndIndex(series) {
var allPlotSeries = plot.getData();
if (typeof series == "number") {
return [series, allPlotSeries[series]];
}
else {
for (var ii = 0; ii < allPlotSeries.length; ii++) {
var plotSeries = allPlotSeries[ii];
if (
plotSeries === series
|| plotSeries.label === series
|| plotSeries.label === series.label
) {
return [ii, plotSeries];
}
}
}
}
plot.hooks.drawOverlay.push(function (plot, ctx) {
for(var seriesIndex in highlightedSeries) {
plot.drawSeries(highlightedSeries[seriesIndex], ctx);
}
});
}
$.plot.plugins.push({
init: init,
options: options,
name: "highlightSeries",
version: "1.0"
});
})(jQuery);
https://stackoverflow.com/questions/2784993
复制相似问题