Question

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

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

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

Answer 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），但在现实生活中你需要取数量数据点被考虑并除以适当的一部分。

Chart.js条形图barWidth不一致

1 个答案: