amcharts4饼状图显示百分比的小数点设置

最新推荐文章于 2024-05-15 09:30:28 发布

pandasen

最新推荐文章于 2024-05-15 09:30:28 发布

阅读量1k

点赞数 1

分类专栏： amcharts4 文章标签： html5 前端 html echarts

本文链接：https://blog.csdn.net/pandasen/article/details/118852673

版权

amcharts4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

amcharts4的饼状图，通过数据计算的百分比默认是一位的，可以通过设置改为2位

 series.labels.template.text = "{value.percent.formatNumber('#.00')}%";

完整代码如下：

 // Set theme
    am4core.useTheme(am4themes_animated);

    // Generate random data
    var data = {$data};
    var chart = am4core.create("chartdiv", am4charts.PieChart);
    chart.data = data;

    /* Create series */
    var series = chart.series.push(new am4charts.PieSeries());
    series.dataFields.value = "amount";
    series.dataFields.category = "company";

    /* Disable labels */
    series.labels.template.disabled = false;
    series.ticks.template.disabled = false;
    //设置小数点
    series.labels.template.text = "{value.percent.formatNumber('#.00')}%";

    /* Create legend */
    chart.legend = new am4charts.Legend();

    /* Create a separate container to put legend in */
    var legendContainer = am4core.create("legenddiv", am4core.Container);
    legendContainer.width = am4core.percent(100);
    legendContainer.height = am4core.percent(100);
    chart.legend.parent = legendContainer;

    chart.events.on("datavalidated", resizeLegend);
    chart.events.on("maxsizechanged", resizeLegend);

    chart.legend.events.on("datavalidated", resizeLegend);
    chart.legend.events.on("maxsizechanged", resizeLegend);
    function resizeLegend(ev) {
        document.getElementById("legenddiv").style.height = chart.legend.contentHeight + "px";
    }

    chart.exporting.menu = new am4core.ExportMenu();
    chart.exporting.extraSprites.push({
        "sprite": legendContainer,
        "position": "bottom",
        "marginTop": 20
    });

具体看官方demo
https://www.amcharts.com/docs/v4/tutorials/dealing-with-piechart-labels-that-dont-fit/