社区首页 >问答首页 >有没有一种方法可以在不重新绘制整个图表的情况下更改jQuery flot中绘图的颜色?

有没有一种方法可以在不重新绘制整个图表的情况下更改jQuery flot中绘图的颜色?
EN

Stack Overflow用户
提问于 2010-05-06 22:37:42
回答 1查看 5.1K关注 0票数 7

我有一个用flot绘制的图表。当有人将鼠标悬停在文本上时,我想更改数据图的颜色。目前,每当我需要突出显示一些东西时,我都会通过重新绘制整个图表来做到这一点。这是相当慢的(对于简单的图表,大约30毫秒,对于更复杂的图表,多达100毫秒)。既然我只想改变颜色,有没有更快的解决方案?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-05-12 06:39:04

您可以立即采取一些步骤来优化Flot的绘制过程。如果不需要图形上的点,则将其关闭,这可以显著减少绘制时间。还应通过将shadowSize选项设定为0来禁用阴影,以提高速度。

除了这两个调整之外,您还必须更改flot源代码,以便能够单独突出显示一个系列。我已经创建了一个补丁来做这件事,还有一个小插件,允许你自动或手动突出显示series。补丁和插件的比重新绘制整个图形快三倍,实际上也消除了取消高亮显示一个系列所需的时间,因为它使用了flot的“叠加”功能。

下面有一个jquery.flot.js的补丁和highlightSeries插件的源代码,我已经创建了一个demonstration page,它可以让你看到不同设置之间的差异以及补丁/插件组合。

Flot补丁

代码语言:javascript
代码运行次数:0
复制
--- .\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插件

代码语言:javascript
代码运行次数:0
复制
/*
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);
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2784993

复制
相关文章
Excel每个单元格都统一加上(或减去)一个数
文章背景:处理Excel单元格数据时,有时需要在单元格区域内同时增加或减少某一数值,这里介绍两种操作方法。
Exploring
2022/08/10
1.8K0
[MySQL]更新时间(加上或者减去一段时间)
定义和用法 DATE_ADD() 函数向日期添加指定的时间间隔。 DATE_SUB() 函数向日期减少指定的时间间隔。 语法 DATE_ADD(date,INTERVAL expr type) DATE_SUB(date,INTERVAL expr type)
用户2353021
2020/05/11
3.9K0
[MySQL]更新时间(加上或者减去一段时间)
DataGridView列自适应宽度
来源:http://www.cnblogs.com/wolf-sun/p/3480104.html
跟着阿笨一起玩NET
2018/09/20
1.8K0
DataGridView列自适应宽度
Windows2003下列引导或系统启动驱动程序无法加载:packet
优化了下系统,重启出现了一个错误。 弹出应用程序: 服务控制管理器 : 在系统启动时至少有一个服务或驱动程序产生错误。详细信息,请使用事件查看器查看事件日志。 仔细查看了一下windows日志记录错误原因是windows启动的时候提示一项服务或者驱动出错,在windows的安全日志中找到了如下的描述:
zhaoJian.Net
2023/02/24
8000
数组或对象中的内容间隔显示
总结:间隔显示,不要使用for 循环,原因是for循环是同步,setTimeout是异步,同步执行完再执行异步。
tianyawhl
2019/11/07
4.3K0
根据数据源字段动态设置报表中的列数量以及列宽度
在报表系统中,我们通常会有这样的需求,就是由用户来决定报表中需要显示的数据,比如数据源中共有八列数据,用户可以自己选择在报表中显示哪些列,并且能够自动调整列的宽度,已铺满整个页面。本文就讲解一下Act
葡萄城控件
2018/01/10
4.9K0
根据数据源字段动态设置报表中的列数量以及列宽度
Ordering列以或更好性能
为减少数据库的存储空间,需要确保对列进行排序,通常最好先放置固定大小的列,然后再添加可变长度的列。
yzsDBA
2021/04/26
3180
OC中获取一串字符串的高度(宽度确定)或宽度(高度确定)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/52937475
用户1451823
2018/09/13
2.6K0
Element Vue 框架的 Table 列宽度自适应解决方案
# 原理 请求获取数据后,遍历数据,动态渲染一个节点,获取节点的宽度,最后改变表格列宽度 # 核心代码 /** * 计算字符串宽度 * @param str * @returns {number} */ function getStrWidth (str) { if (!document.getElementById('str-width')) { document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeend', '<s
cnguu
2020/10/23
2.9K0
按照A列进行分组并计算出B列每个分组的平均值,然后对B列内的每个元素减去分组平均值
前几天在Python星耀交流群有个叫【在下不才】的粉丝问了一个Pandas的问题,按照A列进行分组并计算出B列每个分组的平均值,然后对B列内的每个元素减去分组平均值,这里拿出来给大家分享下,一起学习。
前端皮皮
2022/08/17
3K0
按照A列进行分组并计算出B列每个分组的平均值,然后对B列内的每个元素减去分组平均值
给图片或文字加上鼠标悬浮时旋转动画
一个很简单的css即可实现图片或文字鼠标悬浮时旋转动画。这里就简单的说一下2d旋转。 首先用到 transform 属性,具体代码如下: transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */ -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ -o-transform:
雨尘
2018/07/17
2.3K0
win10 uwp 如何修改 Flyout 的宽度或高度
在堆栈有小伙伴问如何修改 Flyout 的宽度,他看到宽度会使用第一个元素的大小而不是最大的
林德熙
2020/03/25
1.5K0
win10 uwp 如何修改 Flyout 的宽度或高度
最大宽度最小宽度
    css3又加入了min-width,min-height,max-with,max-height等属性
十月梦想
2018/08/29
3.1K0
7-标识列或自增长列
# 标识列 /* 又称为自增长列 含义:可以不用手动插入值,系统提供默认的序列值 特点: 1. 标识列必须和键搭配(主键,唯一,外键等) 2. 一个表中只能有一个标识列 3. 标识列的类型只能是数值型(整型+浮点型) */ # 创建表时,设置某列为标识列 DROP TABLE IF EXISTS tab_identify; CREATE TABLE tab_identify( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20) ); TRUN
Ywrby
2022/10/27
5390
java/poi 调整Excel 列宽支持自适应中文字符宽度
apache/poi是apache旗下用于读写Microsoft Office 二进制文件和OOXML 格式文件的开源库。用它来进行excel文件的导出是很趁手的。 一般来说可以直接使用 Sheet.autoSizeColumn方法自动调整每列的宽度。但是遇到包含中文的列,autoSizeColumn方法计算的列宽是不正确的,算出的宽度不能完整显示中文内容。最近项目中就遇到了这个问题,于是参考网上的各类文章,自己实现了自动适应中文字符宽度的方法
10km
2022/09/16
3.1K1
pandas 导出 Excel 文件的时候自动列宽,自动加上边框
尝试过 xlrd、xlwt、openpyxl、xlwings、pandas 来处理 Excel,如果说除了读写 Excel,还要做数据分析,还是 pandas 最好用,大多数情况下,你根本不需要把数据插入数据库,再用 SQL 去做数据分析。
somenzz
2022/10/25
2.3K0
vue+element实现表格跨行或跨列合并
vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高, 有些产品经理或许会要求表格跨行或跨列合并,如果你正在想怎么实现,那就接着往下看 最新封装了一个表格合并和编辑插件:vue-split-table,戳一戳 效果图
火狼1
2019/04/17
7.9K0
vue+element实现表格跨行或跨列合并
点击加载更多

相似问题

在VSCode中打开木星: TypeError:无法读取未定义的属性(读取'makeSettings')

14

文件移动/复制操作后无法读取的木星笔记本

116

无法发射木星笔记本

29

无法设置木星笔记本

12

我无法在我的木星笔记本上读取数据。

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文