javascript - 如何使用 Plottable.js 创建饼图

Question

我尝试使用 Plottable.js 创建一个饼图。有谁知道怎么做？我对如何传递值并放入标签感到困惑。

这是我的示例数据：

var store = [{ Name:"Item 1", Total:18 },
             { Name:"Item 2", Total:7 },
             { Name:"Item 3", Total:3},
             { Name:"Item 4", Total:12}];

再次感谢！

Answer 1

您可以指定每个切片的值，Pie.sectorValue并且可以打开Pie.labelsEnabled显示每个扇区对应值的标签。您还可以使用格式化标签Pie.labelFormatter

但是，我认为除了扇​​区值之外没有其他方法可以将数据显示为标签，但是根据您的需要，图例可能会起作用

这是带有图例的饼图示例：

window.onload = function(){
  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  

  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))
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true)
  .labelFormatter(function(n){ return "$ " + n ;});
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
    
     
}

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

或者，如果所有值都是唯一的，那么您可以使用labelFormatter

window.onload = function(){
  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  var reverseMap = {};
  store.forEach(function(s) { reverseMap[s.Total] = s.Name;});
    
  var ds = new Plottable.Dataset(store);  
  

  var pie = new Plottable.Plots.Pie()
  .addDataset(ds)
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true)
  .labelFormatter(function(n){ return reverseMap[n] ;})
  .renderTo("#chart");
}

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>