Question

我使用下面的图表：

var data = [
                    { Date: "2015-09-14", DayOfMonth: 14, Type: "Views", Amount: 0, y1: 10, },
                    { Date: "2015-09-15", DayOfMonth: 15, Type: "Likes", Amount: 1, y1: 15, },
                    { Date: "2015-09-16", DayOfMonth: 16, Type: "Likes", Amount: 2, y1: 35, },
                    { Date: "2015-09-17", DayOfMonth: 17, Type: "Likes", Amount: 3, y1: 20, },
                    { Date: "2015-09-18", DayOfMonth: 18, Type: "Views", Amount: 4, y1: 22, },
                    { Date: "2015-09-19", DayOfMonth: 19, Type: "Views", Amount: 5, y1: 22, },
                    { Date: "2015-09-20", DayOfMonth: 20, Type: "Views", Amount: 6, y1: 22, },
         ];


var svg = dimple.newSvg("#chart", svgWidth, svgHeight);
var chart = new dimple.chart(svg, data);
var xAxis = chart.addCategoryAxis("x", "DayOfMonth");
xAxis.title = null;
xAxis.addOrderRule("Date");     
var yAxis = chart.addMeasureAxis("y", "Amount");
yAxis.title = null;

var series = chart.addSeries("Type", dimple.plot.area);
series.interpolation = "cardinal";      
series.getTooltipText = function(e) {
   // need access to Date here
};

在我的工具提示中，我需要行的Date组件，但我只需要DayOfMonth和Amount。

这是一个JSFiddle：http://jsfiddle.net/93q8pewy/1/

如何从工具提示中的原始数据行获取数据，例如，我需要获取Date？

Answer 1

如果你看一下传递给回调的对象e，就会有一个名为key的属性，这个属性用来唯一地标识每个点。考虑到这一点，你可以使用这个kludge：

series.getTooltipText = function (e) {
    var rV = "";
    data.forEach(function(d){ //<-- loop data
       var u = d.Type + '_' + d.DayOfMonth + '___'; //<-- recreate key
       if (u === e.key){ //<-- does it match?
           rV = d.Date;
       }
    });
    return [rV]; //<-- show date in tooltip
};

更新了fiddle。

在getTooltipText（e）事件中访问数据行？

1 个答案: