Chart.js条形图barWidth不一致答案

【问题标题】：Chart.js bar chart barWidth is InconsistentChart.js条形图barWidth不一致
【发布时间】：2024-01-07 00:56:01
【问题描述】：

我在 chartjs 中使用条形图。在那个条形图中，条形宽度不一致。表示当条数（标签）为 1 时，表示单个条显示为更大的宽度。它几乎占据了画布的整个宽度。

当条数（标签）为 3 或更多时，如果我尝试对条形图使用“barValueSpacing”，它工作正常。但如果我最小化浏览器，每个条都重叠意味着它没有反应。

在“JQPLOT”等其他图表中，条形的宽度会自动调整，它不关心条数，因为它具有“barWidth”选项。所以我想在chart.js 中设置条形的默认宽度，并且正在使用“ChartNew.js”库。请问有人能帮我解决这个问题吗？

【问题讨论】：

标签： jquery chart.js chartnew.js

【解决方案1】：

一旦图表宽度变得足够小，您的固定 barValueSpacing 就会水平翻转您的条形（条形的右边缘变为左边缘，反之亦然）。您需要通过扩展条形图类型，根据图表宽度动态设置 barValueSpacing。

这就是你的做法

var a = [1, 2, 3];
var data = {
    labels: ["A", "B", "C"],
    datasets: [{
        label: "My dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: a
    }]
};

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.options.barValueSpacing = this.chart.width / 5;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});

还有小提琴 - http://jsfiddle.net/9avv76vx/

顶部是调整大小的条，底部是普通条 - 我已将图表宽度除以常数 (5)，但在现实生活中，您需要考虑数据点的数量并除以适当的分数。

【讨论】：

感谢您的宝贵回复。它工作正常。我需要另一种解决方案。我正在使用 ChartNew.js 库。 ChatNew.js 库提供了“inGraphDataShow”选项，用于在条形图和饼图的顶部显示数据标签。你能帮我用“Chart.min.js”实现“inGraphDataShow”选项吗
据我所知，Chartjs 没有该选项。您可能可以单独在图表顶部呈现表格（从服务器端或客户端）。
再次感谢您。我能做到。如何使用 ChartNew.js 重绘图表？
抱歉，不太明白 - 你是什么意思，如何重绘...
我的实际要求是我想显示 Chartjs 库中所有图表类型的数据标签。但是 Chartjs 现在没有提供这个选项。所以我选择了 ChartNew.js。您的上述解决方案与 chart.min.js 库完美配合。现在我的问题是如何将上述解决方案与 ChartNew.js 一起使用？。