刻度之间的中心点标签（Polar Area Chart JS） [英] Center point labels between ticks (Polar Area Chart JS)
问题描述
我正在使用Chart JS，其中有一个极地面积图（请参见图像
如何使用datalabels-
我想您看到了是在我使用此插件的地方，因为您的代码与我的代码有很多相似之处。
我改进了代码，因此现在可以响应了。标签甚至是动画的。在这种情况下，由于3个字符的标签很小，因此我对OP的另一个问题（offtopic：有人可以在这里纠正这个同义词吗？我知道这是错误的...）表示了不同的关注。
完整代码： https： //jsbin.com/hamekugoja/2/edit?js,output
let myChart = new Chart（document .getElementById（饼图），{
类型： polarArea，
数据：{
数据集：[{
数据：[342，323，333，352 ，361、299、272、423、425、400、382、363]，
背景颜色：[＃57C5C8，＃57C5C8，＃57C5C8，＃57C5C8，＃57C5C8， ＃ff0931，＃ff0931，＃57C5C8，＃57C5C8，＃57C5C8，＃57C5C8，＃57C5C8]，
borderWidth：4，
hoverBorderColor： white，
}]，
标签：[
JAN，
FEB，
MAR，
APR，
MAY，
JUN，
JUL，
AUG，
SEP，
OCT，
NOV，
DEC
]，
}，
选项：{
响应：true，
插件：{
datalabels：{
fo rmatter：function（value，context）{
return context.chart.data.labels [context.dataIndex];
}，
锚点：开始，
对齐：结束，
偏移量：0 //获取更新的
}，
}，
cutoutPercentage：20，
图例：{
显示：false
}，
布局：{
padding：30，
}，
比例尺：{
标尺标签：{
显示：true
}，
刻度：{
max：450，
maxTicksLimit：1，
display：false，
}，
angleLines：{
display：true
}，
pointLabel：{
display：false
}
}，
onResize：function（）{
let width = document.getElementById（ pie-chart）。width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset =宽度/ 2填充
}
}
}）；
函数updateOffset（）{
let width = document.getElementById（ pie-chart）。width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width / 2-padding
myChart.update（）
}
updateOffset（）//在知道图表$ b的尺寸后初始化调用$ b
I'm using Chart JS in which I have a polar area chart (see image https://imgur.com/XedmesD) I want the point labels to be centered between the ticks. I have found solutions that only seem to work with bar charts that have an X and Y axis by using.
xAxes: [{
gridLines: {
offsetGridLines: true
}
]}
But this does not seem to work when using a polar area chart.
My code is
import React, { Component } from "react";
import Chart from "chart.js";
export default class OrdersFufilledChart extends Component {
OrdersFufilledChart = React.createRef();
componentDidMount() {
const OrdersFufilledChart = this.OrdersFufilledChart.current.getContext(
"2d"
);
new Chart(OrdersFufilledChart, {
type: "polarArea",
data: {
datasets: [
{
data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931","#57C5C8","#57C5C8","#57C5C8","#57C5C8","#57C5C8"],
borderWidth: 4,
hoverBorderColor: "white",
}
],
labels: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
},
options: {
responsive: true,
plugins: {
datalabels: {
display: false,
},
},
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 0,
},
scale: {
scaleLabel: {
display: true
},
ticks: {
max: 450,
maxTicksLimit: 1,
display: false,
},
angleLines: {
display: true
},
pointLabels: {
display: true
}
},
}
});
}
render() {
return (
<div>
<canvas
id="OrdersFufilledChart"
ref={this.OrdersFufilledChart}
width={360}
height={360}
/>
</div>
);
}
}
Any insight on how I can do this or pointers in the right direction will be greatly appreciated.
EDIT
I'm looking for something like this with the labels between inbetween.
What about using the datalabels-plugin for that?
I guess you saw my other answer where I used this plugin because your code has many similarities to mine.
I improved my code so it's responsive now. The labels are even animated. I don't share OP's concerns of the other question (offtopic: can somebody correct this genitive here? I know it's wrong...) with cluttered labels in this case because of the small 3-char-labels.
Complete code: https://jsbin.com/hamekugoja/2/edit?js,output
let myChart = new Chart(document.getElementById("pie-chart"), {
type: "polarArea",
data: {
datasets: [{
data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8"],
borderWidth: 4,
hoverBorderColor: "white",
}],
labels: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
},
options: {
responsive: true,
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
anchor: 'start',
align: 'end',
offset: 0 // Gets updated
},
},
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 30,
},
scale: {
scaleLabel: {
display: true
},
ticks: {
max: 450,
maxTicksLimit: 1,
display: false,
},
angleLines: {
display: true
},
pointLabels: {
display: false
}
},
onResize: function() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
}
}
});
function updateOffset() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
myChart.update()
}
updateOffset() //init call after we know the dimensions of the chart
这篇关于刻度之间的中心点标签（Polar Area Chart JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
