Question

我想限制条形图的最大宽度

我的代码：

    <script>
        // bar chart data
        var a=[];
            a.push('kalai 2015-04-11');
        var b=[];
            b.push('300');
        var barData = {
            labels : a,

            datasets : [
                {
                    fillColor : "#48A497",
                    strokeColor : "#48A4D1",
                    data : b

                }
            ]
        }
        // get bar chart canvas
        var income = document.getElementById("income").getContext("2d");
        // draw bar chart
        new Chart(income).Bar(barData, {scaleGridLineWidth : 1});
        <!--new Chart(income).Bar(barData);-->
    </script>

这样做的方法是什么

单个值看起来像这样 Single element

条形尺寸随着条形数量的增加而减小如何设置最大条形尺寸以使其更易于查看

Answer 1

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

在Chart.js中添加这些代码行第1步：

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

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

第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);
                    }

在条形图

的calculateBarWidth函数中添加此条件

现在，您可以通过设置

将自定义js文件中的barWidth设置为选项

isFixedWidth:true,
barWidth:xx

如果您不想指定固定的条宽，只需更改isFixedWidth:false

即可

Answer 2

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

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

希望有所帮助......

Answer 3

我是通过扩展条形图并动态计算barValueSpacing来实现的。我使用angular 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);
            }
        });

Answer 4

您是否尝试过以下选项？

procedure Combination( pLeft : string;pRedCount, pWhiteCount : integer; pResult : strings );
begin
  if (pRedCount = 0) and (pWhiteCount = 0)  then
  begin
    pResult.Add( pLeft );
    exit;
  end;
  if pRedCount > 0 then Combination( pLeft + 'R', pRedCount - 1, pWhiteCount, pResult );
  if pWhiteCount > 0 then Combination( pLeft + 'W', pRedCount, pWhiteCount - 1, pResult )

end;

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

4 个答案: