代码之家 › 专栏 › 技术社区 › Tristan

浮动堆叠条形图并在鼠标悬停时显示条形值

flot charts jquery javascript

Tristan · 技术社区 · 15 年前

我试图理解flot的工具提示功能,但并没有真正了解它!

我正在尝试实现一个工具提示,显示堆叠条形图每个部分的标签和值。

有人能指出我的例子吗?或者提供代码?

4 回复 | 直到 7 年前

Peter Hilton 15 年前

下面的代码适用于我的Flot堆叠条形图,基于显示数据点悬停的Flot示例。诀窍是堆叠图表中的“item”值是累积的,因此工具提示中显示的“y”值必须先减去下面条形图的数据点。

var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, y + " " + item.series.label);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }
});

我在Flot文档中没有找到这个,但是 item.datapoint 数组似乎包含了我在实践中需要的内容。

Thomas 12 年前

上面的代码为我引起了重绘问题。下面是一个改进的代码:

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

PeterM 10 年前

这和上面的托马斯一样,只是我将工具提示向上移动以防止它阻塞悬停操作。

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

Aaron Marton 7 年前

解决方案是使用回调函数将动态数据正确返回到标签。

我发现将第四个参数传递给“tooltipopts”的回调函数实际上会给您整个数据对象,从中构建图表/图形。从这里,您可以使用与要提取的标签索引相同的函数的第二个参数,轻松提取X轴标签。

例:

数据对象I'm passing to the plot function:

< PRE> >代码> 数据:【1137】、【2194】、【3376】、【4145】、【5145】、【6145】、【7146】】 , { 条形图:显示:真,填充:真,条形图宽度:0.3,线条宽度:1,填充颜色:颜色:不透明度:0.8,不透明度:1],对齐:“中心”, 颜色:'fcc100'] 系列:阴影大小:3, xAx:{ 秀:真的, 字体:颜色:ccc', 位置:'底部', 滴答:【1,'星期四'、【2,'星期五'、【3,'星期六'、【4,'星期日'、【5,'星期一'、【6,'星期二'、【7,'星期三'】 } yaxis:显示:真,字体:颜色:ccc', 网格:悬停:真,可单击:真,边框宽度:0,颜色:'rgba(120120120,0.5)', 工具提示:真的, TooTyPopts:{ 内容:函数(data,x,y,dataobject){ var xdataindex=dataobject.dataindex; var xdatalabel=dataobject.series.xaxis.ticks[xdataindex].label; 返回在“+xdatalabel”上创建的关于您的页面的y+'故事 } 默认主题:假, 轮班:x:0,y:-40 } } < /代码>
从上述数据对象呈现的条形图:

正如您在图像预览中看到的,用于动态地从实际数据中呈现标签内容的逻辑是:

tooltipopts:。{ 内容:函数(data,x,y,dataobject){ var xdataindex=dataobject.dataindex; var xdatalabel=dataobject.series.xaxis.ticks[xdataindex].label; 返回y+'在'+xdata标签上创建的关于您的页面的故事; } 默认主题:假, 轮班:x:0,y:-40 } < /代码> 标签。我发现将第四个参数传递给“tooltipopts”的回调函数实际上会给您整个数据对象,从中构建图表/图形。从这里,您可以使用与要提取的标签索引相同的函数的第二个参数,轻松地提取X轴标签。例子: 我传递给绘图函数的数据对象: [ { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] } ], { bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' }, colors: ['#fcc100'], series: { shadowSize: 3 }, xaxis: { show: true, font: { color: '#ccc' }, position: 'bottom', ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']] }, yaxis:{ show: true, font: { color: '#ccc' }}, grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' }, tooltip: true, tooltipOpts: { content: function(data, x, y, dataObject) { var XdataIndex = dataObject.dataIndex; var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; return y + ' stories created about your page on ' + XdataLabel }, defaultTheme: false, shifts: { x: 0, y: -40 } } } 从上述数据对象呈现的条形图: 如您在图像预览中所看到的,用于动态地从实际数据中呈现标签内容的逻辑是: tooltipOpts: { content: function(data, x, y, dataObject) { var XdataIndex = dataObject.dataIndex; var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; return y + ' stories created about your page on ' + XdataLabel; }, defaultTheme: false, shifts: { x: 0, y: -40 } }