Chart.js 图表Js不可见水平条

固定的

现在已修复此问题。具有使图表无法显示的圆角条功能

在我的项目中实现水平条时，这些条是不可见的。将类型更改为bar可以使代码正常运行。你知道这是什么原因吗

import React, { Component } from "react";
import Chart from "chart.js";

export default class NewOrdersChartData extends Component {
    NewOrdersChartData = React.createRef();

    componentDidMount() {
        const NewOrdersChartData = this.NewOrdersChartData.current.getContext(
            "2d"
        );

        new Chart(NewOrdersChartData, {
            type: "horizontalBar",
            data: {
                labels: ["Total Orders", "Pending", "Acknowledged", "Completed", "Committed"],
                datasets: [
                    {
                        label: "Test",
                        data: [238, 147, 182, 128, 81],
                        backgroundColor: ["rgba(0, 135, 136)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)"],
                        hoverBackgroundColor: ["rgba(0, 135, 136)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)"]
                    }
                ]
            },
            options: {
                responsive: true,

                legend: {
                    display: false,
                    position: "bottom",

                    labels: {
                        fontColor: "#333",
                        fontSize: 50
                    }
                },
                scales: {
                    //yaxes change
                    yAxes: [
                        {
                            stacked: true,
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: true

                            }
                        }
                    ],
                    //xaxes change
                    xAxes: [
                        {
                            ticks: {
                                display: false
                            },
                            gridLines: {
                                drawBorder: false,
                                display: false,
                                scaleShowLabels: false

编辑

现在已修复此问题。具有使图表无法显示的圆角条功能

---

我没有什么要补充的。

我在使用chart.js时遇到了这个问题。如果你的网站上有多个图表，这可能是它不起作用的原因之一。我会确保你的自定义插件没有影响这一点

例如数据标签、圆形条等

---

我通过删除我的自定义插件解决了这个问题。

似乎在codesandbox中工作：我不知道为什么它不能为我自己显示，这是不可能的。您可以尝试的是：将整个

new Chart（）

内容放在一个变量中（比如

this.Chart

）。在此之前，检查

if（this.chart）

并在检查内部调用

this.chart.destroy（）。在
new Chart（）
stuff的末尾，调用
this.Chart.update（）