reactjs - ChartJS - 定位和查看水平条的各种组件的问题

问题描述

我有一个HorizontalBar像这样使用的 React 组件：

<div>
    <HorizontalBar data={myData} options={myOptions} height={80} />
</div>

提供的选项有：

{
    title: {
        display: true,
        text: 'My Title',
    },
    tooltips: { enabled: false },
    hover: { mode: null },
    legend: { display: false },
    responsive: true,
    maintainAspectRatio: false,
    layout: {
        padding: {
            left: 10,
            right: 10,
            top: 0,
            bottom: 0,
        },
    },
    animation: {
        duration: 0,
    },
    scales: {
        xAxes: [
            {
                position: 'top',
                gridLines: {
                    display: false,
                },
                ticks: {
                    beginAtZero: false,
                    min: 0,
                    max: 100,
                    sampleSize: 2,
                    callback: function (value: number, index: any, values: any) {
                        if (value == 0 || value == 100) {
                            return value;
                        }
                        return '';
                    },
                },
                stacked: true,
            },
        ],
        yAxes: [{ stacked: true }],
    },
};

目前，这就是它的样子。我在画布上添加了背景颜色，以向您展示发生了什么：

这里有几件事是错误的，我需要一些帮助：

我无法弄清楚为什么我的画布左侧有一些神秘的填充物。
我想压缩渐变条和标题之间的距离，但在向属性添加padding选项方面我没有尝试过title似乎有效。
最后，实际上应该有一个数据标签，因为画布的大小而被裁剪。如果我将 height 属性调整HorizontalBar为 140，它会显示：

基本上，我想要的是显示数据标签，而没有如此垂直拉伸的所有内容（并且没有出现在第二张照片中的 y 轴线）。

我希望它看起来像这样：

我该如何做到这一点？

编辑：我发现了 y 轴线显示问题。我只需要添加gridLines: { display: false }到我的yAxes选项中，然后将其删除。

标签： reactjschart.jsreact-chartjs

reactjs - ChartJS - 定位和查看水平条的各种组件的问题

问题描述

解决方案

推荐阅读