我怎样才能改变高图中的酒吧的宽度？ [英] How can I change the width of the bars in a highchart?

问题描述

使用像这一个的条形图，可以改变宽度酒吧代表另一个数据属性，比如说水果的重量。水果越重，酒吧就越厚。

With a bar chart like this one, is is possible to change the width of the bars to represent another data attribute, say the weight of the fruits. The heavier the fruit is, the thicker the bar.

您可以使用脚本这里。我打开其他JavaScript绘图库，只要它们是免费的，就可以做到这一点。

You play with the script here. I am open to other javascript plotting libraries that could do that as long as they are free.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
                // I would like something like this (3.5, 6 etc is the width) :
                // data: [[5, 3.4], [3, 6], [4, 3.4], [7, 2], [2, 5]]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });

});​

推荐答案

pointWidth 是您设置条的宽度所需的。尝试

pointWidth is what you require to set the width of the bars. try

plotOptions: {
            series: {
                pointWidth: 15
            }
        }

此显示宽度为15px。在这里玩 。只是编辑了已有的代码。

This display bars with the width of 15px. Play around here. Just made an edit to the already existing code.

这篇关于我怎样才能改变高图中的酒吧的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！