Question

我创建了一个圆环图。

var ctx=document.getElementById('mycanvas').getContext('2d');
            var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
            labels: ["CL", "ML", "Spl.L", "PD","Other Permissions"],
            datasets: [{
            label: "My First dataset",
            backgroundColor: [' #F0CB8C','#EE97A1','#A9D5D4','#E8A3D7','#CFA3FD'],          
            data: [ 7, 3, 3],
            }]
            },
            options: {
              tooltips: { bodyFontSize: 25 }
            }
            });

这里我想在垂直位置显示图表右侧的标签。
怎么做？

完整代码：https://jsfiddle.net/axoy2Ljt/

Answer 1

获得预期结果......

<强>ꜰɪʀꜱᴛ

在图表选项中为position: 'right'设置 legend ：

options: {
   legend: {
      position: 'right'
   }
}

<强>ꜱᴇᴄᴏɴᴅ

用div元素（.chart-container）包装画布并将其设置为的宽度和高度，而不是为canvas元素本身设置它：

.chart-container {
   width: 280px;
   height: 280px;
}

另外，您应该使用最新版本的Chart.js，即2.7.1 atm。

这是working example。

如何更改甜甜圈图表中标签的位置？

1 个答案: