如何在Plottable.js/D3.js制作的饼图中启用qtip2

How to enable qtip2 in Piechart made by Plottable.js/D3.js

本文关键字：js qtip2 启用 Plottable D3      更新时间：2023-09-26

我有这样的代码，它试图在plottable.js 中启用qtip

var store = [{ Name:"Item 1", Total:18.73424242 },
               { Name:"Item 2", Total:7.34311 },
               { Name:"Item 3", Total:3.1235535},
               { Name:"Item 4", Total:12.763574}];
  
  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);
  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("qtip2-title", function(d) { return '<div class="bartip">' + d.Name + " (" + d.Total.toFixed(2) + ')</div>'; })
  .addClass("tooltipped")
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true);
 
    
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
/*
// Adding this block does not work
$(".tooltipped rect").qtip({
              overwrite: true,
              content: {
              text: function() {
                return $(this).attr("qtip2-title");
                    }
             },
                position: {
                  my: "bottom middle",
                  at: "top middle"
                },
                style: {
                   classes: "qtip-light"
                }
          });
          
   */
<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

正如您注意到的，qtip2 Javascript代码似乎不起作用。我怎样才能让它工作？

步骤1

您需要包含jQuery，因为qTip依赖于jQuery。

步骤2

将工具提示信息存储在某个属性中，这里我使用的是属性名称title

.attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })

将类工具提示添加到路径中。

  .attr("class", "tooltipped")

步骤3

使用jQuery选择器将其附加到所有具有类tooltipped 的路径

// Adding this block which will work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },
  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});

此处或下方的工作代码：

var store = [{
  Name: "Item 1",
  Total: 18.73424242
}, {
  Name: "Item 2",
  Total: 7.34311
}, {
  Name: "Item 3",
  Total: 3.1235535
}, {
  Name: "Item 4",
  Total: 12.763574
}];
var colorScale = new Plottable.Scales.Color();
var legend = new Plottable.Components.Legend(colorScale);
var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d) {
    return d.Name;
  }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })
  .attr("class", "tooltipped")
  .sectorValue(function(d) {
    return d.Total;
  })
  .labelsEnabled(true);

new Plottable.Components.Table([
  [pie, legend]
]).renderTo("#chart");
// Adding this block does not work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },
  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});
<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

相关文章：