Chart.js PolarArea 图表.将标签更改为 45 度角
我在网上搜索了如何解决这个问题没有成功.我见过人们使用背景图片,但这似乎很懒惰且无益.我想将标签移动到 45 度角,这样看起来更专业.
I have searched through the net with no success on how to solve this. I have seen people use a background image but that seems lazy and unhelpful. I want to move the labels to a 45 degree angle so it looks more professional.
我的图表目前看起来像这样 -
My chart currently looks like this -
但我希望它看起来像这样 -
But I am wanting it to look like this -
有人对我如何做到这一点有任何想法吗?
Anyone have any ideas on how I can do this?
我的代码副本在下面.
new Chart(DummyChart, {
type: "polarArea",
data: {
labels: ["Dummy1", "Dummy 2", "Dummy 3", "Dummy 4"],
datasets: [
{
data: [125, 375, 300, 240],
backgroundColor: "#57C5C8",
borderWidth: 4,
hoverBorderColor: "white",
label: "Dummy Dummy "
}
]
},
options: {
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 0
},
scale: {
ticks: {
max: 450,
maxTicksLimit: 1,
display: false
},
angleLines: {
display: true
},
pointLabels: {
display: true
}
},
plugins: {
datalabels: {
display: false
}
}
}
});
推荐答案
这是我使用 datalables 插件的解决方案.
Here's my solution with the datalables plugin.
https://jsbin.com/bigedugasi/1/edit?html,js,输出
我已经更新了我以前的解决方案以使图表具有响应性.
I have updated my previous solutions to make the chart responsive.
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
anchor: 'start',
align: 'end',
offset: 0 // Gets updated
}
},
onResize: function() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
}
相关文章