Question

已修复。

现在已解决此问题。具有圆条功能，导致图表无法显示。

在我的项目中实现水平条时，这些条是不可见的。将类型更改为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

编辑

现在已解决此问题。具有圆条功能，导致图表无法显示。

我无话可说了。

Answer 1

我在玩chart.js时遇到了这个问题。如果您的网站中有多个图表，则可能是导致其不起作用的一个因素。我会确保您的自定义插件都不会影响到这一点。

例如数据标签，圆条等。

我通过删除自定义插件来解决此问题。

图表Js不可见的水平条

1 个答案: