chart.js之设定条形图的最大规模的酒吧

我的代码：

<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

酒吧的大小随着b的数量而减少AR增加我怎样才能设置最大的酒吧大小，使其更容易看

来源

2015-04-27 The6thSense

http://stackoverflow.com/questions/29894577/chart-js-setting-maximum-bar-size-of-bar-chart?rq=1 –

您可以添加新的选项，这些选项不可用default.But你需要编辑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功能通过设置

isFixedWidth:true, 
barWidth:xx

现在你可以在自定义的js文件作为选项设置barWidth添加这种情况下如果不希望指定固定barwidth，只是改变isFixedWidth:false

来源

2015-11-06 05:47:19

超级！伟大的解决方案，+100。 – ron

这是一个非常有用的补充Chart.js，因为这个答案我已经使用，但我不认为fixedWidth和maxWidth是与OP要求的相同的东西。 – KickingLettuce

您是否尝试过以下选项？

{ 
    //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 : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 

}

来源

2015-04-27 12:00:40

是的，我没有我的改变barValueSpacing它改变了它之间的距离，但没有改变酒吧的大小 – The6thSense

我期待scaleGridLineWidth：1，应该为你工作，我无法尝试这个，因为我没有工作环境。 –

我已经实现了你在我的示例代码中所说的，因为它没有改变 – The6thSense

它有点迟来回答这个问题，但希望这可以帮助那里的人...玩barDatasetSpacing [在每个酒吧后添加空格]和barValueSpacing [在每个酒吧之前添加空格]能够实现您ř所需条宽..例如启动你的条形图

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

希望它能帮助..

来源

2016-01-29 07:58:30

它永远不会太晚:)。 – The6thSense

我做到了通过延伸条形图时，并动态地计算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); 
      } 
     });

来源

2016-09-07 14:31:15 Chandru

chart.js之设定条形图的最大规模的酒吧

回答

相关问题