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>   

如何做到这一点

对于单个元素，它看起来像这样

当条形数量增加时，条形的大小会减小。如何设置最大条形大小以使其更易查看。

- The6thSense

---

https://dev59.com/2orda4cB1Zd3GeqPJC9q?rq=1 - Ashish Gangrade

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

在barchart的calculateBarWidth函数中添加此条件

现在你可以通过设置选项在自定义js文件中设置barWidth

isFixedWidth:true,
barWidth:xx

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

- Ashwini Bhat

---

太好了！很棒的解决方案，加100分。 - JAN

这是一个非常有用的Chart.js补充，我之前使用过，因为它可以回答问题，但我认为fixedWidth和maxWidth不是OP所问的同一件事情。 - TheLettuceMaster

Answer 2

虽然回答有些晚了，但希望能对某些人有所帮助......玩弄barDatasetSpacing（在每个柱子后面添加间距）和barValueSpacing（在每个柱子前面添加间距）以实现所需的柱状图宽度。例如，在初始化您的条形图时：

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

希望这有所帮助。

- Anthony Mutisya

---

没什么太晚的时候 :)。 - The6thSense

Answer 3

我通过扩展条形图并动态计算 barValueSpacing 来实现。我使用的是 Angular Chart.js。

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

- chank

Answer 4

你尝试过以下选项吗？

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

}

- Nilesh Mahajan

---

是的，我改变了barValueSpacing，它改变了它们之间的距离，但是没有改变条形的大小。 - The6thSense

我预计 scaleGridLineWidth: 1 可以为您工作，但由于我没有工作环境，无法尝试。 - Nilesh Mahajan

我已经在我的示例代码中实现了您所说的内容，因此它并没有改变。 - The6thSense