如何更改 Chart.js 水平条形图的宽度？答案

【问题标题】：How to change Chart.js horizontal bar chart Width?如何更改 Chart.js 水平条形图的宽度？
【发布时间】：2016-02-12 16:37:16
【问题描述】：

我正在尝试使Chartjs.Horizontal 生成的条更薄。

我尝试更改 calculateBarWidth 以从传入的选项对象返回一个值。

当这不起作用时，我尝试硬编码一个值以返回到calculateBarWidth（代码如下）。但是，这也不起作用。

我还有什么其他途径可以解决这个问题吗？

Chart.Type.extend({
    name: "HorizontalBar",
    defaults : defaultConfig,
    initialize:  function(data){

        //Expose options as a scope variable here so we can access it in the ScaleClass
        var options = this.options;

        this.ScaleClass = Chart.Scale.extend({
            offsetGridLines : true,
            calculateBarX : function(datasetCount, datasetIndex, barIndex){
                var xWidth = this.calculateBaseWidth(),
                    xAbsolute = this.calculateX(barIndex) - (xWidth/2),
                    barWidth = this.calculateBarWidth(datasetCount);

                return xAbsolute + (barWidth * datasetIndex) + (datasetIndex * options.barDatasetSpacing) + barWidth/2;
            },
            calculateBaseWidth : function(){
                return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
            },
            calculateBarWidth : function(datasetCount){
                return 10;
            },
            // rest of code

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

只需重写 buildScale 方法，以便在缩放对象创建后对其进行处理。

预览

脚本

Chart.types.HorizontalBar.extend({
  name: "HorizontalBarAlt",
  initialize:  function(data){
    var originalBuildScale = this.buildScale;
    var chart = this;
    chart.buildScale = function() {
          var r = originalBuildScale.apply(this, arguments);
          chart.scale.calculateBarHeight = function() {
             return 10;
          }
          return r;
    }
    Chart.types.HorizontalBar.prototype.initialize .apply(this, arguments);
  }
});

小提琴 - http://jsfiddle.net/2mtgsoy3/

【讨论】：

【解决方案2】：

您可以在选项对象中设置它。

var options = 
{
    scales: 
    {
        yAxes: [
            {
                barPercentage: 0.3
            }]
    }
}

【讨论】：