如何使用Rickshaw庫在折線圖上顯示自定義工具提示

我正在開發一個實時圖形系統，它將使用json文件中的數據在特定時間顯示內存使用情況。我正在使用Rickshaw庫，它接受數字類型的工具提示，其他硬編碼值作爲屬性提供給圖形。如何使用Rickshaw庫在折線圖上顯示自定義工具提示

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

來源

2016-02-27 kailash yogeshwar

，你能不能給我們關於您的問題/錯誤一些進一步的信息？

從我的快速查看來看，您的工具提示（Rickshaw.Graph.HoverDetail）將無法呈現，因爲您在格式化程序中要求輸入「series，x，y」，並且您沒有設置每個數據數組的元素具有ax和y值。

例如：

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

看看人力車例如here。

來源

2016-05-10 22:08:15 jsurf

如何使用Rickshaw庫在折線圖上顯示自定義工具提示

回答

相關問題