Chart.js 条形图数据标签插件问题
发布时间:2022-06-06 23:45:29 267
相关标签: # 数据
我刚刚从“chartjs插件datalabels”安装并导入了ChartDataLabels,以便将标签添加到现有条形图中。我有两个关于两个不同图表的问题。
1)左侧图表:条形图显示了时间范围,但我希望能够在条形图上添加选择该时间范围作为数据标签的人数。作为参考,需要作为数据标签的数据点在下面代码的注释中调用。我有没有办法将其添加为数据标签,而不是现在显示为数据标签的内容?
import { endsWith, trimEnd } from "lodash-es";
import { ChartProps } from "react-chartjs-2";
import { withTheme } from "styled-components";
const timeValues = (value: number | string) => {
const hour = new Date(value).getHours();
if (hour === 12) return hour + " PM";
if (hour >= 12) return hour - 12 + " PM";
return hour + " AM";
};
export const preferredTimesOptions: (
dateTimeBase: [number, number],
datasets: any[],
invokeModal: any
) => ChartProps<"bar">["options"] = (dateTimeBase, datasets, invokeModal) => ({
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: {
display: false,
stacked: true,
},
yAxes: {
stacked: true,
type: "linear",
beginAtZero: false,
position: "left",
reverse: true,
min: dateTimeBase[0],
max: dateTimeBase[1],
ticks: {
stepSize: 3.6e6,
callback: timeValues,
},
},
},
interaction: {
intersect: true,
},
onClick(event, elements) {
const element = elements[0];
if (!element) return;
const { datasetIndex } = element;
const focusedDataset = datasets[datasetIndex];
invokeModal({
tableData: [
{
answer: focusedDataset.text,
responders: focusedDataset.responders.map((r: any) => r.profile),
},
],
});
},
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (model) => {
const { datasetIndex } = model;
return `Count: ${datasets[datasetIndex].count.toString()}`;
// *** this is what should show as the data label *** //
},
},
datalabels: {
display: true,
},
},
},
});
2)右侧图表:我正在尝试在x轴标签(周一至周五)和数据标签本身之间添加空间。我试图添加填充,但这似乎在整个图表(包括x轴标签)周围添加了填充。
export const teamLocationsOptions: ChartProps<"bar">["options"] = {
maintainAspectRatio: false,
responsive: true,
layout: {},
scales: {
xAxes: {
position: "top",
grid: {
borderColor: "transparent",
},
},
yAxes: {
display: false,
},
},
plugins: {
legend: {
display: false,
},
datalabels: {
display: true,
anchor: "end",
align: "top",
offset: 0,
padding: 0,
},
},
};
有什么建议吗?非常感谢。
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报