Question

我的highcharts条形图中的列非常薄。它不是自动计算宽度。对于相关系列，它没有占据网格的最大部分。 http://jsfiddle.net/akshayasharma/WLCzS/28/

$this->db->select("B.*","MAX(A.BID)")
            ->from("tbl_bid A")
            ->join("wl_customers B","A.customers_id=B.customers_id")
            ->where("portfolio_id",$Id)->get()->result();

Answer 1

您的假设“它没有占用相关系列的网格的最大部分”是不正确的。事实上，它是最大化列宽，但您没有为您的系列提供每个值。所以你有很多高度为0的列。

在构建示例时，您必须为每个系列提供def trip_cost(city, days): return hotel_cost(days) + plane_ride_cost("Los Angeles") + rental_car_cost(days)，x:0，x:1等值。请参阅此示例的扩展程序，其中我为每个系列提供x:2值：

x:0

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            type: "category"
        },
        
        series: [{
            name: "a",
            data: [{x: 0, y: 70}]
        }, {  
            name: "b",
            data: [{x: 0, y: 65},{x: 1, y: 29}]
        },
        {     
            name : "c",
            data: [{x: 0, y: 60},{x: 2, y: 29}]
        },
        {           
            name : "d",
            data: [{x: 0, y: 55},{x: 3, y: 29}]
        }, {            
            name : "e",
            data: [{x: 0, y: 50},{x: 4, y: 29}]
        },
        {           
            name : "f",
            data: [{x: 0, y: 45},{ x: 5, y: 29}]
        }
        ]
    });
});

也许你想要这样的东西：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/2.3.2/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            type: "category"
        },
        
        series: [{
            colorByPoint: true,        
            data: [{
                name: "a",
            	y: 70
              },{  
                name: "b",
            	y: 29
              },{     
                name : "c",
            	y: 29
              },{           
                name : "d",
                y: 29
              }, {
                name : "e",
            	y: 29
              }
           ]
        }]
    });
});

Answer 2

默认情况下，您的系列已分组，您可以使用以下命令禁用分组：

plotOptions: {
    column: {
        grouping: false,
    }
},

实例：http://jsfiddle.net/vwbwn1gz/

Answer 3

@ gus27的答案很好，但我会把它作为另一种选择，并进一步解释。

默认情况下，

grouping为true，当您在列/条形图上放置多个系列时，假设您打算对它们进行分组。

因此，它会为每个系列（gus提到的x值列）的列在轴上的每个0值留出空间。

如果您没有尝试制作带有分组列的图表，则可以

1）将您的所有数据放入一个系列（如前所述）

2）在grouping：

中将false设为plotOptions

plotOptions: {
  series: {
    grouping: false
  }
}

小提琴：

http://jsfiddle.net/WLCzS/30/

highcharts条形图：列宽很薄

3 个答案: