I am currently trying to display the number and date(string format) of a json file into tipsy tooltip.
data =[{"dates":["2010-07-01","2010-07-02","2010-07-03","2010-07-04","2010-07-05","2010-07-06","2010-07-07","2010-07-08","2010-07-09","2010-07-10","2010-07-11","2010-07-12","2010-07-13","2010-07-14","2010-07-15","2010-07-17","2010-07-18","2010-07-19","2010-07-20","2010-07-21","2010-07-23","2010-07-24","2010-07-26","2010-07-27","2010-07-28","2010-07-29","2010-07-30","2010-07-31"],"ratings":[3.29, 3.8, 4.67, 4.17, 3.33, 4.25, 4.0, 4.0, 3.83, 3.67, 3.25, 4.0, 4.5, 3.67, 4.33, 4.0, 4.0, 3.0, 4.5, 4.0, 4.0, 4.0, 4.4, 4.0, 4.25, 4.0, 4.0, 4.0]}]
var w = data[0].ratings.length,
h = 20;
var vis = new pv.Panel()
.width(w)
.height(h);
vis.add(pv.Bar)
.data(data[0].ratings)
.width(4)
.left(function() 5 * this.index)
.height(function(d) Math.round(d))
.bottom(0)
// I need the "开发者_运维问答num" to be dynamic, meaning getting the current count of the bar position when doing a mouseover.
.text(function(d) "Date: " +data[0].dates[num] + " Average Rating: "+ d)
.event("mouseover", pv.Behavior.tipsy({gravity: "s", fade: true }));
vis.add(pv.Rule)
.bottom(12)
.strokeStyle("red")
vis.render();
I need the num in data[0].dates[num] to be dynamic, meaning that it will get the count of the bar when I do a mouseover on the bar displayed. My main aim is to get the tooltip to display the ratings and the date together. For eg, if the num is 1, it will display 2010-07-01 and so on...
Can anyone shed some ways to acheive my aim?
You want the this.index
property:
data[0].dates[this.index]
See the whole thing in action.
精彩评论