在dimple.js的饼图中添加数据标签

时间:2017-05-18 10:01:07

标签: javascript d3.js dimple.js

这是我的样本数据



Date	HomeTeam	AwayTeam	FTHG	FTAG	FTR	HTHG	HTAG	HTR	HS	AS	HST	AST	HF	AF	HC	AC	HY	AY	HR	AR
24-08-2013	Sampdoria	Juventus	0	1	A	0	0	D	4	11	1	4	21	21	4	10	2	3	1	0
25-08-2013	Verona	Milan	2	1	H	1	1	D	14	15	8	5	11	14	6	5	2	3	0	0
26-08-2013	Cagliari	Atalanta	2	1	H	1	1	D	23	11	7	2	19	17	10	3	2	4	0	0
27-08-2013	Inter	Genoa	2	0	H	0	0	D	20	4	5	0	15	9	12	2	2	3	0	0
28-08-2013	Lazio	Udinese	2	1	H	2	0	H	20	7	6	3	15	13	4	4	4	3	0	0




我正在使用dimple.js来创建一个饼图。它不会自动添加标签(工具提示除外)。我不知道在饼图中使用哪种属性或方法向相应的部门添加标签。



<html>

<head>
  <title>Pie Chart</title>
</head>
<div id="chartContainer">
  <meta charset="utf-8" />
  <script src="http://d3js.org/d3.v4.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
  <script src="moment.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("foulsandgoals.tsv", function(data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(20, 20, 460, 360)
      myChart.addMeasureAxis("p", "FTHG");

      myChart.addSeries("HomeTeam", dimple.plot.pie);
      myChart.addLegend(500, 20, 90, 300, "left");
      myChart.draw();
    });
  </script>
</div>

</html>
&#13;
&#13;
&#13;

I want to add proportion labels to each division like this(click the link)

0 个答案:

没有答案