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

The6thSense 发表于 Dev

第六感

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

我的代码：

    <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>

这样做的方法是什么

单个值看起来像这样单元素

条形的尺寸随着条形数量的增加而减小。如何设置最大条形尺寸以使其更可见

阿什维尼·巴特（Ashwini Bhat）

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

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

//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设置为选项