AmCharts

Question

当我创建包含大量数据的漏斗图时，标签会超出图表 div，就像这样

是否可以解决此问题，或者我是否需要创建另一个仅包含图例的 div？

        var userInfo = JSON.parse('@Html.Raw(DataJson)');
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "funnel",
            "theme": "light",
            "dataProvider": userInfo,
            "balloon": {
                "fixedPosition": false
            },
            "valueField": "Quantidade",
            "titleField": "Variac",
            "marginRight": 250,
            "marginLeft": 30,
            "startX": 0,
            "depth3D": 50,
            "angle": 25,
            "outlineAlpha": 1,
            "outlineColor": "#FFFFFF",
            "outlineThickness": 0.5,
            "labelPosition": "right",
            "balloonText": "[[Variac]]: [[Quantidade]]",
        });

这是一个演示问题的演示。

http://jsfiddle.net/abngzewr/3/

Answer 1

无法阻止标签离开图表 div，但您可以通过设置隐藏较小切片的 hideLabelsPercent 值然后创建图例来解决此问题列出所有切片。

AmCharts.makeChart("chartdiv", {
  // ...
  hideLabelsPercent: 2, //hide labels of slices that take up < 2% in size
  // ...
});

由于您有大量数据，您可以使用 divId 在外部 div 中创建图例，这样您就可以分别为图表和图例留出空间。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "funnel",
  "theme": "light",
  "dataProvider": [{
      "title": "Website visits",
      "value": 200
    }, {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    }, {
      "title": "Purchased additional products",
      "value": 26
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    },

  ],
  "balloon": {
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "title",
  "marginRight": 250,
  "marginLeft": 30,
  "startX": 0,
  "depth3D": 50,
  "angle": 25,
  "outlineAlpha": 1,
  "outlineColor": "#FFFFFF",
  "hideLabelsPercent": 2,
  "outlineThickness": 2,
  "labelPosition": "right",
  "balloonText": "[[title]]: [[value]]n[[description]]",
  "export": {
    "enabled": true
  },
  "legend": {
    "divId": "legenddiv"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}
#legenddiv {
  position: relative;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="legenddiv"></div>

AmCharts - 在图表外切片标签 div

AmCharts - Slice labels outside of chart div