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

这样做的方法是什么

单个值看起来像这样

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

解决方法

您可以添加默认情况下不可用的新选项.但是您需要编辑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

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

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

解决方法

猜你在找的JavaScript相关文章