相关疑难解决方法(0)

如何移动 Chart.js 饼图上标签的位置

我正在使用 Chart.js,并且尝试将饼图上的标签移到饼图区域之外(请参见红色 X):

在此输入图像描述

这是我现在的代码:

<div class="container" id="pieContainer">
    <h4 class="title">Title</h4>
    <center><canvas id="pie"></canvas></center>
</div>

<script>                                  
    var pieData = [
    {
        value: 39,
        color:"#335478",
        label: "Blue"
    },
    {
        value : 4,
        color : "#7f7f7f",
        label: "Grey"
    },
    {
        value : 57,
        color : "#99cb55",
        label: "Green"
    }
    ];

    var optionsPie = {
        responsive : true,
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
             this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>%"
    };
    new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData, optionsPie);
</script>
Run Code Online (Sandbox Code Playgroud)

我不想使用图例,而且找不到移动标签的内置方法。有没有办法在不改变的情况下做到这一点chart.js?实现我的目标的最佳方法是什么?

javascript css label chart.js

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

chart.js ×1

css ×1

javascript ×1

label ×1