Chart.js设置条形图的最大条形尺寸-Chart.jssettingmaximumbarsizeofbarchart

5  

You can add new options, which are not available by default.But you need to edit chart.js

您可以添加默认情况下不可用的新选项。但是您需要编辑chart.js

In Chart.js add these lines of code Step 1:

在Chart.js中添加以下代码行第1步：

//Boolean - Whether barwidth should be fixed
        isFixedWidth:false,
        //Number - Pixel width of the bar
        barWidth:20,

Add these two line in defaultConfig of Bar Chart

在条形图的defaultConfig中添加这两行

Step 2:

第2步：

calculateBarWidth : function(datasetCount){

                    **if(options.isFixedWidth){
                        return options.barWidth;
                    }else{**
                        //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
                        var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
                            return (baseWidth / datasetCount);
                    }

Add this condition in calculateBarWidth function of barchart

在条形图的calculateBarWidth函数中添加此条件

Now you can set barWidth in custom js file as option by setting

现在，您可以通过设置将自定义js文件中的barWidth设置为选项

isFixedWidth:true,
barWidth:xx

If you don't want to specify fixed barwidth, just change isFixedWidth:false

如果您不想指定固定的barwidth，只需更改isFixedWidth：false

3  

Its kinda late to answer this but hope this helps someone out there... play around with barDatasetSpacing [ adds spacing after each bar ] and barValueSpacing [ adds spacing before each bar ] to be able to achieve your desired bar width.. example below when initiating your bar chart

回答这个问题有点晚了但是希望这可以帮助那里的人...玩barDatasetSpacing [在每个栏后添加间距]和barValueSpacing [在每个栏前添加间距]以便能够达到你想要的栏宽。下面的例子当启动条形图

... barDatasetSpacing:10, barValueSpacing:30, ...

Hope it helps..

希望能帮助到你..

1  

I did it by extending Bar chart, and calculating barValueSpacing dynamically. I use angular chartjs

我是通过扩展条形图并动态计算barValueSpacing来实现的。我使用角度chartjs

var MAX_BAR_WIDTH = 50;
Chart.types.Bar.extend({
            name: "BarAlt",
            draw: function(){
              var datasetSize = n // calculate ur dataset size here
              var barW = this.chart.width / datasetSize;
              if(barW > MAX_BAR_WIDTH){
                this.options.barValueSpacing = Math.floor((this.chart.width - (MAX_BAR_WIDTH * datasetSize)) / datasetSize);
              }
              Chart.types.Bar.prototype.draw.apply(this, arguments);
            }
        });

0  

Did you tried following options?

你尝试过以下选项吗？

{
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero : true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1,

    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,

    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,

    //Boolean - If there is a stroke on each bar
    barShowStroke : true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth : 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing : 5,

    //Number - Spacing between data sets within X values
    barDatasetSpacing : 1,

    //String - A legend template
    legendTemplate : "
-legend\"><% for (var i=0; i
\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"

}