Question

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

我有一个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

Answer 1

您能否提供一些有关您的问题/错误的更多信息？

从我的快速看看，你的工具提示（Rickshaw.Graph.HoverDetail）将无法渲染，因为你在格式化程序中询问输入“series，x，y”并且你没有设置每个元素数据数组中有ax和y值。

示例：

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

看看人力车示例here。

如何使用Rickshaw Library在折线图上显示自定义工具提示

1 个答案: