nvd3圆环图没有显示所有标签

时间:2015-12-08 21:56:22

标签: angularjs nvd3.js donut-chart

Donutchart Image

我正在如图所示绘制聊天,但是没有显示百分比图表中所有切片的百分比标签。只显示12个标签。我想显示传奇中显示的所有标签的百分比,而不是lapping.can。一些帮助。

这是我的代码:

JS:

    nv.addGraph(function() {
    var chart = nv.models.pieChart()
        .x(function(d) { return d.value })
        .y(function(d) { return d.count })
        .showLabels(true)     //Display pie labels
       // .labelThreshold(0.1)  //Configure the minimum slice size for labels to show up
        .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
        .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
        .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
        .valueFormat(d3.format(',.0d'));
    ;

    d3.select("#chart svg")
        .datum(data)  
        .transition().duration(350)
        .call(chart);

    return chart;
});
var data=[{
      "field":"toyota_series",
      "value":"Prius",
      "count":95903},
    {
      "field":"toyota_series",
      "value":"Camry",
      "count":54512},
    {
      "field":"toyota_series",
      "value":"Mirai",
      "count":45261},
    {
      "field":"toyota_series",
      "value":"Tacoma",
      "count":26961},
    {
      "field":"toyota_series",
      "value":"Corolla",
      "count":22355},
    {
      "field":"toyota_series",
      "value":"RAV4",
      "count":21737},
    {
      "field":"toyota_series",
      "value":"Avalon",
      "count":10759},
    {
      "field":"toyota_series",
      "value":"Sienna",
      "count":9820},
    {
      "field":"toyota_series",
      "value":"Tundra",
      "count":9224},
    {
      "field":"toyota_series",
      "value":"4Runner",
      "count":8542},
    {
      "field":"toyota_series",
      "value":"Highlander",
      "count":7686},
    {
      "field":"toyota_series",
      "value":"Land Cruiser",
      "count":7381},
    {
      "field":"toyota_series",
      "value":"Yaris",
      "count":4217},
    {
      "field":"toyota_series",
      "value":"Matrix",
      "count":4072},
    {
      "field":"toyota_series",
      "value":"Prius c",
      "count":1960},
    {
      "field":"toyota_series",
      "value":"Sequoia",
      "count":1924},
    {
      "field":"toyota_series",
      "value":"Prius v",
      "count":1281},
    {
      "field":"toyota_series",
      "value":"FJ Cruiser",
      "count":947},
    {
      "field":"toyota_series",
      "value":"Venza",
      "count":841},
    {
      "field":"toyota_series",
      "value":"FT-1",
      "count":178},
    {
      "field":"toyota_series",
      "value":"PM",
      "count":16},
    {
      "field":"toyota_series",
      "value":"Prius-Plug-in-Hybrid",
      "count":1}]

HTML:

<div id="chart">
            <svg></svg>
        </div>

的CSS:

#chart{
height:485px;

}

0 个答案:

没有答案