Chart.js 设置条形图的最大条形大小

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>

有什么方法可以做到

单个值看起来像这样

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

Answer 1

您是否尝试过以下选项？

{
    //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>"

}

Answer 2

您可以添加新的选项，default.But 您需要编辑 chart.js

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

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

在Bar Chart的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);
                    }

在barchart的calculateBarWidth函数中添加这个条件

现在您可以通过设置

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

isFixedWidth:true,
barWidth:xx

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

Answer 3

回答这个问题有点晚了，但希望这能帮助那里的人...玩转 barDatasetSpacing [在每个条形之后添加间距] 和 barValueSpacing [在每个条形之前添加间距] 以获得您想要的条形宽度.. 启动条形图时的示例

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

希望对您有所帮助..

Answer 4

我通过扩展条形图并动态计算 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);
            }
        });

Chart.js 设置条形图的最大条形大小

Chart.js setting maximum bar size of bar chart

html

javascript

css

chart.js