返回

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,
    },
  },
};

有什么建议吗?非常感谢。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
下一篇
如何将列从 df1 合并到 df2 pyspark> 2022-06-06 21:41:45