标签: react-chartjs-2

内举例。作为参考，我使用的是最新版本的 ChartJS (3.2.1) 和最新版本的react-chartjs-2 (3.0.3)。

我想知道如何在给定多个不同数据集的情况下使我的条形图以特定方式显示。我希望图表上的条形以其标准宽度呈现，同时还允许在必要时并排重叠。

当您使用一个数据集（该数据集可能有两个值落在同一 X 轴坐标上）时，ChartJS 将以我的“理想”方式处理此问题，但在使用多个数据集时我似乎无法模仿这种行为。

似乎每当两个数据集共享一个轴时，条形宽度要么会调整以容纳两组数据，即使它们不占据相同的空间，要么当它们占据相同的空间时它们会堆叠在一起。我的目标是仅在必要时让条形“缩小”其宽度，否则保持其全宽。

下面是我希望看到的多个数据集的示例（这是 ChartJS 在有一个数据集时处理渲染的方式barThickness: "flex"）：

在中间，您会注意到条形宽度会自动调整，以便为彼此腾出空间。

这是当我使用两个没有任何重叠点的数据集（在barThickness: "flex"两者上都设置）时得到的示例：

最后，这是一个使用两个数据集时存在一些重叠点的示例：

到目前为止，我发现解决此问题的唯一方法是创建多个 x 轴，一个用于一个数据集，一个用于另一个数据集，一个用于重叠。然后，通过操作我的数据结构，为每个轴创建数据集，其中包含与所需条形宽度相对应的数据点。

这当然是一个解决方案，但我正在处理一个生产代码库、数千行数据和几个附加数据集（所有这些数据集都有不同的状态、可见性条件和规则）。像这样一起管理所有这些几乎是不可能的，更不用说以可维护的方式了。我已经浏览了绝大多数 StackOverflow 问题和 ChartJS 文档，试图找到更简洁的解决方案，但到目前为止还不够，非常感谢您的帮助。

下面的代码的简化版本。我添加了一些未使用的片段（大部分已注释掉），只是为了展示我迄今为止尝试过的内容：

var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");
var ctx3 = document.getElementById("canvas3").getContext("2d");

function getBackgroundColor(data) {
  const bar = data.dataset.data[data.dataIndex];
  return bar.projection ? "green" : "black";
}
const dataset1Labels = ['Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021']
const dataset2Labels = ['Jan 2020', …

我正在使用react-chartjs-2库在React中制作简单的图表。我尝试通过添加标题来自定义工具提示：

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        return tooltipItem?.value + ' test';
      }
    }
  }

代码沙箱：https://codesandbox.io/s/zealous-mestorf-ste8u
尽管我遵循了 Chart.js 示例以及许多其他自定义工具提示示例（即来自此问题的答案：React-chartjs），但代码不起作用-2：饼图工具提示百分比 ）。

我正在使用react-chart-js（https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/Horizo ​​ntalBar.js）中的水平条，如下所示，

  const data = {
    label: ["graph"],
    datasets: [
      {
        label: "A",
        backgroundColor: "red",
        data: [50],
      },
      {
        label: "B",
        backgroundColor: "yellow",
        data: [10],
      },
    ],
  };

  const chartOptions = {
    scales: {
      xAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
      yAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
    },
  };

和

<div>
  <HorizontalBar data={data} options={chartOptions}/>
</div>

我尝试直接将高度应用于 div 或水平栏以限制画布的放大，但它并不能解决问题。是否可以分别向图表画布提供高度和宽度。

我有带有“react-chartjs-2”的条形图，我应该在 xAxes 中将图表标签的字体系列放在哪里：这样：（不起作用）

<Bar
    data={chartData}
    options={{ defaults: { global: { defaultFontFamily:"iransans} }}}
/>

这种方式不起作用：

    <Bar
        data={chartData}
        options={{ font: { family: "iransans" }}}
    />

有人知道吗？？？

我有一个react-chart-js2组件，我试图在填充上制作渐变，但是我遇到了一些不同的打字稿错误，并且似乎无法让它工作。

该文档表示将 data 属性作为函数传递并引用画布，以便访问画布上下文以添加渐变。不幸的是，这不起作用。

这是文件的codesandbox：https://codesandbox.io/s/modest-bird-j2in8（文件LineChartGradient.tsx）

我遇到的错误围绕 Canvas Context 并将数据函数传递给 Chartjs 组件

数据

const data = (canvas: HTMLCanvasElement) => {
    const ctx = canvas.getContext("2d");
    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
    gradient.addColorStop(0, "rgba(250,174,50,1)");
    gradient.addColorStop(1, "rgba(250,174,50,0)");

    return {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      datasets: [
        {
          label: "First dataset",
          data: [33, 53, 85, 41, 44, 65],
          fill: "start",
          backgroundColor: "rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)"
        },
        {
          label: "Second dataset",
          data: [33, 25, 35, 51, 54, 76],
          fill: "start",
          borderColor: "#742774" …

我正在尝试在条形图顶部添加数据标签

import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';

<Bar data={chartData} options={opts} plugins={[ChartDataLabels]} />

参考这个链接

面临以下问题：

无法解析/node_modules/chartjs-plugins-datalabels/dist中的chart.js/helpers

我有一个包含以下数据的圆环图组件：

  const data = {
    labels: ["1", "2"],
    datasets: [
      {
        label: "peers",
        data: [1, 2],
        backgroundColor: ["#56E2CF", "#56AEE2"]
      }
    ]
  };

数据运行正常。这些是选项：

  const options = {
    legend: {
      display: "right"
    }
  };

甜甜圈成分：

<Doughnut data={data} options={options} />

但图表仍然没有标题：

我尝试使用插件将选项放入 char.js 样式：

  const options = {
    plugins: {
      legend: {
        position: "right"
      }
    }
  };

图例移动了，但出现类型错误（仍然没有标题）：The types of 'plugins.legend.position' are incompatible between these types. Type 'string' is not assignable to type '"right" | "left" | "top" | "bottom" | …