Chart Js 隐形水平条答案

【问题标题】：Chart Js invisible horizontal barChart Js 隐形水平条
【发布时间】：2019-11-20 09:09:09
【问题描述】：

已修复。

现在修复了这个问题。具有导致图表不显示的圆角条功能。

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

编辑

现在修复了这个问题。具有导致图表不显示的圆角条功能。

我没有其他要补充的。

【问题讨论】：

似乎在代码沙箱中工作：codesandbox.io/s/nervous-water-nkhqx?fontsize=14
我不知道为什么它没有为我自己显示
不可能说。您可能可以尝试的方法：将整个 new Chart() 内容放入一个变量中（比如说 this.chart）。在此之前，检查if (this.chart) 并在支票内调用this.chart.destroy()。在new Chart() 的末尾，调用this.chart.update()

标签： chart.js bar-chart

【解决方案1】：

我在玩 chart.js 时遇到了这个问题。如果您的网站中有多个图表，这可能是它无法正常工作的一个因素。我会确保您的自定义插件都不会影响这一点。

如数据标签、圆角条等。

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

【讨论】：