找到你要的答案

Q:Flot Chart - Display Meta Data on Hover

Q:上表显示的元数据在盘旋

I have a chart that display 0-100% on the Y axis and quarters on the X-axis. The source data includes:

{ 
 date: '2015 Q1',
 numerator: 55,
 denominator: 105,
 percent:52 
}

When plotting, the series data is specified as [52, '2015 Q1'] and displays on the chart correctly. However, when I hover over the data point, I would like to display the raw numerator and denominator as well as the percentage.

Is there any way for me to include additional meta data in the series data?

** Note for this example I am simplifying the quarter logic. It is actually specified in milliseconds as per the flot specs **

我有一个图表,显示在Y轴和X轴0-100%宿舍。源数据包括:

{ 
 date: '2015 Q1',
 numerator: 55,
 denominator: 105,
 percent:52 
}

当绘制,系列数据指定为[ 52,2015 ]和Q1显示在图正确。然而,当我停留在数据点,我想显示原始的分子和分母以及百分比。

有没有办法让我在序列数据中加入额外的元数据?

**注意这个例子,我简化了四分之一的逻辑。它实际上是以毫秒为单位按上规格*

answer1: 回答1:

First, your example data should be ['2015 Q1', 52], x value goes first.

And second, you can use arrays with more then two values for the datapoints, for example ['2015 Q1', 52, 55, 105] and then use the third and forth value in your tooltips (flot will ignore them when drawing the chart itself for line and point charts).

Example code for the tooltip:

function bindHover() {
    $(document).on('plothover', '#chart', function (event, pos, item) {
        if (item) {
            if (prevPoint != item.dataIndex) {
                prevPoint = item.dataIndex;
                $('#tooltip').remove();

                var tooltipString = item.series.name + ': ' + item.datapoint[0];
                tooltipString += '/' + item.datapoint[1];
                tooltipString += '<br/>' + item.series.data[item.dataIndex][2];
                tooltipString += '/' + item.series.data[item.dataIndex][3];
                showTooltip(item.pageX, item.pageY, tooltipString);
            }
        }
        else {
            $('#tooltip').remove();
            prevPoint = null;
        }
    });
}

首先,你的数据应该[ '2015 Q1,52 ],x的值先。

其次,你可以使用更多的数据点,然后阵列的两个值,例如[ '2015 Q1,52,55,105 ]和你的提示然后用第三、四值(上会忽略他们时,绘制图表本身的点线图)。

用于工具提示的示例代码:

function bindHover() {
    $(document).on('plothover', '#chart', function (event, pos, item) {
        if (item) {
            if (prevPoint != item.dataIndex) {
                prevPoint = item.dataIndex;
                $('#tooltip').remove();

                var tooltipString = item.series.name + ': ' + item.datapoint[0];
                tooltipString += '/' + item.datapoint[1];
                tooltipString += '<br/>' + item.series.data[item.dataIndex][2];
                tooltipString += '/' + item.series.data[item.dataIndex][3];
                showTooltip(item.pageX, item.pageY, tooltipString);
            }
        }
        else {
            $('#tooltip').remove();
            prevPoint = null;
        }
    });
}
javascript  metadata  flot