Blazor ChartJs：将栏扩展到 canvas 的末尾

Question

使用 Blazor.ChartJs 库，我有一系列水平堆积条形图，目的是显示完成百分比。红色部分是年度目标，蓝色部分是目前实际达到的数字：

第一个图表的目标可能是 10,000,000 美元，第二个是 3,000,000 美元，第三个是 7,000,000 美元，等等。但是我希望每个图表都扩展到包含它的 table 单元格的末尾，因为我不关心数字，只关心百分比：

正如您在第一个图表中看到的那样，数字在单元格末尾之前停止。我正在将图表添加到 HTML table 个单元格，每个单元格对应我跟踪的每个统计数据：

<table>
    <tbody>
        <tr>
            <td></td>
            <td>% Complete</td>
        </tr>
        @for (int i = 0; i < typeOfProject.Count; i++)
        {
            <tr>
                <td><Chart Config="_configs[i]" Height="8" /></td>
                <td>@String.Format("{0:P0}", percentagesComplete[i])</td>
            </tr>
        }
    </tbody>
</table>

我使用 returns BarConfig 选项的方法构建 _configs 集合，所有图表的配置都相同。我已经尝试过 Responsive 和 MaintainAspectRatio 属性，但这似乎不会影响结果。

config = new BarConfig
{
    Options = new BarOptions
    {
        MaintainAspectRatio = true,
        Responsive = true,
        Legend = new Legend
        {
            Display = false
        },
        Scales = new BarScales
        {
            XAxes = new List<CartesianAxis>
            {
                new BarLinearCartesianAxis
                {
                    Stacked = true,
                    OffsetGridLines = false,
                    Offset = false,
                    Display = AxisDisplay.False
                }
            },
            YAxes = new List<CartesianAxis>
            {
                new BarCategoryAxis
                {
                    Stacked = true,
                    OffsetGridLines = false,
                    Offset = false, 
                    Display = AxisDisplay.False,
                    BarThickness = 45
                }
            }
        }
    }

我还在中提到的每个单元格中的 Canvas 对象周围添加了一个 div 标记，但这不是我的问题的解决方案。

如何将条形扩展到每个单元格中 canvas 的末尾？

Answer 1

我创建了自己的代码来执行此操作，因为我无法使图表宽度始终扩展到 table 单元格的末尾。要求也略有变化，所以我需要绘制一个代表 100% 目标的空矩形，然后用目标完成程度的百分比填充矩形。

首先，我有一个 JavaScript 方法获取 canvas 的宽度，根据该宽度和“值”变量（百分比）计算要绘制的像素数，然后使用上下文首先绘制一个清晰的矩形。它绘制了一个表示目标进度的填充矩形：

 function buildCanvas(canvasId, value) {
    var canvasWidth = document.getElementById(canvasId).offsetWidth;
    var calculatedWidth = parseInt(canvasWidth * value);

    var canvasToDraw = document.querySelector('#' + canvasId);
    const ctx1 = canvasToDraw.getContext('2d');
    ctx1.clearRect(0, 0, 300, 150);

    ctx1.fillStyle = 'rgba(173, 116, 76, 1.0)';
    ctx1.fillRect(0, 0, calculatedWidth, 150);
}

我定义要绘制的图表：

<canvas id="chart" style="border: 1px solid #AD744C; height: 18px; width: 300px">

然后我注入 IJSRuntime 并调用 JavaScript 方法来绘制矩形，该值是目标值除以该值得到的百分比：

@inject IJSRuntime JsRuntime    
...
JsRuntime.InvokeAsync<string>("buildCanvas", $"chart", $"{value}");

Blazor ChartJs：将栏扩展到 canvas 的末尾

Blazor ChartJs: Expanding bar to the end of the canvas

chart.js

blazor