ChartJS 如何更改圆环图中标签的位置？

llew8vvj 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(218)

我已经建立了一个环圈图。

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/

chart.js

来源：https://stackoverflow.com/questions/47050080/how-to-change-position-of-labels-in-doughnut-chart

2条答案

按热度按时间

guykilcj1#

最新版本的chart.js的语法略有不同，需要 Package 在plugins中

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

赞(0）回复(0）举报 2022-11-06

laawzig22#

要获得预期结果...

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

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

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

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

此外，您还应该使用Chart.js的最新版本，即2.7.1 atm。
这是一个working example。

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 如何更改圆环图中标签的位置？

2条答案

相关问题

热门标签

最新问答