AmCharts - вырезать метки за пределами графика - PullRequest
Новая
       8

AmCharts - вырезать метки за пределами графика

0 голосов
/ 17 сентября 2018

Когда я создаю воронкообразную диаграмму с большим количеством данных, метки выходят за пределы div диаграммы, как это

Chart image

Можно ли это исправить или сделатьМне нужно создать еще один 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/

1 Ответ

0 голосов
/ 17 сентября 2018

Нет способа помешать этикеткам выходить из div диаграммы, но вы можете обойти это, установив значение hideLabelsPercent, которое скрывает меньшие кусочки, а затем создайте легенду, в которой перечислены все ломтики. 

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

Поскольку у вас много данных, вы можете создать легенду во внешнем элементе с помощью divId, чтобы у вас было место для диаграммы и легенды отдельно. 

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>
...