使用Dimple JS

时间:2017-02-10 05:05:22

标签: javascript d3.js pie-chart dimple.js

我有一个使用Dimple.js创建的饼图,其数据集具有以下结构:Id,Value,Text。

我可以很好地显示饼图。

我能够开始工作的是点击一块馅饼并获得该块的ID。我需要这个用户将用户导航到另一个页面。这怎么可能?

这是我的代码。

var svg = dimple.newSvg("#PieChart", "100%", "300px");
var data = [
   {"Id":1, "Value":10, "Text":"Apples"},
   {"Id":2, "Value":15, "Text":"Oranges"},
   {"Id":3, "Value":20, "Text":"Pears"}];
var myChart = new dimple.chart(svg, data);
myChart.addMeasureAxis("p", "Value");
var mySeries = myChart.addSeries("Text", dimple.plot.pie);
mySeries.addEventHandler("click", function (e) {
   alert("I want the Id.");
});
myChart.draw();

这是Fiddle

1 个答案:

答案 0 :(得分:0)

我认为没有任何直接的方法。 以下是我试过的可能会让你通过

mySeries.addEventHandler("click", function (e) {
      var key = d3.select(e.selectedShape[0][0]).data()[0].aggField
[0];//get the text on which it is clicked
    //find the text from the data array
        var value = data.find(function(d){ return d.Text == key});
        //value has everything
    alert("I got the Id " + value.Id);
});

工作代码here