Javascript 使用Chart.js在条形图中显示“未找到记录”消息

我想在条形图中没有数据时显示文本消息。我正在使用

react-chart-js-2

和下面的代码来显示消息，但它不起作用。我不知道出了什么问题，但我认为这可能是可行的，因为我指的是这把小提琴

react chartjs 2提供的“我的条形图画布”元素：

<Bar data={this.state.chart2Data}
    height={650}
    width={1200}
    options={{
        title: {
        display: true,
        text: 'Repetitive Observations - Review 2',
        fontSize: 16,
        fontColor: '#000000'
        },
        legend: {
            display: true,
            position: 'top',
            labels: {
                fontColor: '#000000'
            }

        },
        maintainAspectRatio: false,
        plugins: {
            datalabels: {
               display: function(context) {
                return context.dataset.data[context.dataIndex] !== 0},
               color: '#ffffff'
            }
         },
        responsive: false,
        scales: {
            xAxes:[{
              scaleLabel: {
                  display: true,
                  labelString: 'Activity',
                  fontStyle: 'bold',
                  fontColor: '#000000',
                  fontSize: 13
                },
                ticks: {
                    fontColor: '#000000',
                    minRotation: 90
                }
            }],
            yAxes:[{
                ticks: {
                    fontColor: '#000000'
                    }
            }]
        }
    }}  
/>

有人能帮忙吗？

您所指的内容纯粹是在

Javascript

上

在你的反应中

{this.state.chart2Data&&this.state.chart2Data.length>0？
:
没有要显示的数据
}

您所引用的内容纯粹是在

Javascript

上

在你的反应中

{this.state.chart2Data&&this.state.chart2Data.length>0？
:
没有要显示的数据
}

尽管它可以工作，但我想清除图表并在图表上显示消息。使用条件方法，我将无法在空图表中正确格式化和显示消息。在这种情况下，您需要使用一些CSS在图表上显示文本。即使它可以工作，但我希望清除图表并在图表上显示消息。使用条件方法，我将无法正确格式化并在空图表中显示消息。在这种情况下，您需要使用一些CSS在图表上显示文本。

<Bar data={this.state.chart2Data}
    height={650}
    width={1200}
    options={{
        title: {
        display: true,
        text: 'Repetitive Observations - Review 2',
        fontSize: 16,
        fontColor: '#000000'
        },
        legend: {
            display: true,
            position: 'top',
            labels: {
                fontColor: '#000000'
            }

        },
        maintainAspectRatio: false,
        plugins: {
            datalabels: {
               display: function(context) {
                return context.dataset.data[context.dataIndex] !== 0},
               color: '#ffffff'
            }
         },
        responsive: false,
        scales: {
            xAxes:[{
              scaleLabel: {
                  display: true,
                  labelString: 'Activity',
                  fontStyle: 'bold',
                  fontColor: '#000000',
                  fontSize: 13
                },
                ticks: {
                    fontColor: '#000000',
                    minRotation: 90
                }
            }],
            yAxes:[{
                ticks: {
                    fontColor: '#000000'
                    }
            }]
        }
    }}  
/>

{this.state.chart2Data && this.state.chart2Data.length > 0 ? <Bar data = {this.state.chart2Data}
    height = {
        650
    }
    width = {
        1200
    }
    options = {
        {
            title:
            {
                display: true,
                text: 'Repetitive Observations - Review 2',
                fontSize: 16,
                fontColor: '#000000'
            },
            legend:
            {
                display: true,
                position: 'top',
                labels:
                {
                    fontColor: '#000000'
                }

            },
            maintainAspectRatio: false,
            plugins:
            {
                datalabels:
                {
                    display: function(context)
                    {
                        return context.dataset.data[context.dataIndex] !== 0
                    },
                    color: '#ffffff'
                }
            },
            responsive: false,
            scales:
            {
                xAxes: [
                {
                    scaleLabel:
                    {
                        display: true,
                        labelString: 'Activity',
                        fontStyle: 'bold',
                        fontColor: '#000000',
                        fontSize: 13
                    },
                    ticks:
                    {
                        fontColor: '#000000',
                        minRotation: 90
                    }
                }],
                yAxes: [
                {
                    ticks:
                    {
                        fontColor: '#000000'
                    }
                }]
            }
        }
    }
    />
    :
    <div> No Data to display </div>
}