Javascript 如何使用人力车库在折线图上显示自定义工具提示

我正在开发一个实时图形系统，它将使用json文件中的数据显示特定时间的内存使用情况。我正在使用人力车库，它接受数字类型的工具提示，或者硬编码值作为属性提供给图形

我有一个json对象，如下所示：

[
{
"memory": 444.08203125,
"memoryInfo": {
  "rss": 444.08203125,
  "vsize": 1271.125
},
"cpu": 0.2,
"url": [
  "/admin/company/approved"
],
"time": "2/12/2016, 10:42:09 AM"
},
...
...
]

我想在特定时间在工具提示中显示服务器提供的url是什么，这样我就可以获得适当的信息，比如哪个路由消耗了更多内存

我将与您分享我迄今为止的js代码，以便更好地理解

script.js

$(function(){
var json = null;
console.log("Document Ready");
$.ajax({
        url: 'data.json',
        type: 'get',
        success: function (data) {
            console.log("Got data");
            json = data
            drawGraph()
        }
    });



var interval = 250;

//function to use from populating new values to graph
var getMemory = function(index) {
    return json[index].memory
}

var getUrl = function(index) {
    return json[index].url[0]
}

var getToolTip = function(){
    console.log("getting tooltip")
    return "api/login"
}

var drawGraph = function(){
        // instantiate our graph!
        graph = new Rickshaw.Graph( {
            element: document.getElementById("chart"),
            width: 900,
            height: 400,
            renderer: 'line',
            interpolate:'basis',
            series: new Rickshaw.Series.FixedDuration([{ name: 'memory' ,color:'steelblue',tooltip:"/api/login"}], undefined, {
                timeInterval: interval,
                maxDataPoints: 500,
                timeBase: new Date().getTime() / 1000,
            }) 
        })
 //tooltip is hardcoded should be dynamic when fetching each object from json
        graph.render();

        // get Recent log data using socket and feed it to graph

        var i = 0;
        var iv = setInterval( function() {
        i++

            var data =  {   memory: getMemory(i)};
            graph.series.addData(data);
            graph.render();

        }, interval );

     //hover details
     var hoverDetail = new Rickshaw.Graph.HoverDetail( {
            graph: graph,
            formatter: function(series, x, y) {
                var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
                var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
                var content = swatch + series.tooltip + ": " + parseInt(y) + '<br>' + date;
                console.log(series)
                return content;
            }
        });

    }   
});//jQuery

$（函数（）{
var=null；
控制台日志（“文件准备就绪”）；
$.ajax({
url:'data.json'，
键入：“get”，
成功：功能（数据）{
日志（“获取数据”）；
json=数据
绘图图（）
}
});
var区间=250；
//用于将新值填充到图形的函数
var getMemory=函数（索引）{
返回json[index]。内存
}
var getUrl=函数（索引）{
返回json[index].url[0]
}
var getToolTip=function（）{
log（“获取工具提示”）
返回“api/登录”
}
var drawGraph=函数（）{
//实例化我们的图形！
图=新人力车。图（{
元素：document.getElementById（“图表”），
宽度：900，
身高：400，
渲染器：“行”，
内插：'基础'，
系列：new Rickshaw.series.FixedDuration（[{名称：'memory'，颜色：'steelblue'，工具提示：“/api/login”}]，未定义{
时间间隔：时间间隔，
最大数据点：500，
时基：新日期（）.getTime（）/1000，
}) 
})
//工具提示是硬编码的，从json获取每个对象时应该是动态的
graph.render（）；
//使用套接字获取最近的日志数据并将其馈送到图形
var i=0；
var iv=设置间隔（函数（）{
我++
var data={memory:getMemory（i）}；
图.系列.添加数据（数据）；
graph.render（）；
}，间隔）；
//悬停细节
var hoverDetail=新人力车.Graph.hoverDetail（{
图：图，
格式化程序：函数（系列，x，y）{
变量日期=''+新日期（x*1000）.ToutString（）+''；
var样本=“”；
var content=swatch+series.tooltip+“：“+parseInt（y）+”
“+date；
console.log（系列）
返回内容；
}
});
}   
});//jQuery

您能给我们一些关于您的问题/错误的进一步信息吗

通过快速查看，您的工具提示（Rickshaw.Graph.HoverDetail）将无法呈现，因为您在格式化程序中请求输入“series，x，y”，并且您尚未将数据数组的每个元素设置为具有x和y值

例如：

data: [ { x: 0, y: 5 }, { x: 1, y: 10 } ]

以人力车为例