Javascript 要避免高图中每个堆叠条之间的间距吗？

我和海图一起工作，遇到了一个我正在努力克服的小问题

我已经创建了一个JSFIDLE，因此您可以看到我的问题：

[A]

如你所见

我可以在highcharts中实现上述格式，因为当单个组值到达时，此图表基于动态数据进行渲染highcharts在条形图之间留下了大量空间。我在这里附上图片

代码呢

$('#container-one').highcharts({
    chart: {
        type: 'bar',
        events: {
            click: function (event) {
                console.log(event.pageX + ',' + event.pageY);
            }
        }
    },

    credits: {
        enabled: false
    },

    title: {
        text: 'Total fruit consumtion, grouped by gender'
    },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        minPadding: 1.1,
        maxPadding: 1.1
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of fruits'
        }
    },

    tooltip: {
        enabled: false,
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        // column: {
        //     stacking: 'normal'
        // }
        series: {
            pointWidth: 20,
            stacking: 'normal',
            borderWidth: 0,
            events: {
                click: function (event) {
                    //reloadFlash();
                    //$('#report').html('click on yAxis title');
                    console.log(event.pageX + ',' + event.pageY);
                }
            }
        }
    },

    series: [{
        name: 'John',
        color: 'rgba(89,89,89,1)',
        data: [5],                     // data: [5, 3, 4, 7, 4],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Joe',
        color: 'rgba(255,95,215,1)',
        data: [3],                    // data: [3, 4, 4, 2, 2],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Jane',
        color: 'rgba(217,116,0,1)',
        data: [2],                    // data: [2, 5, 6, 2, 1],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Janet',
        color: 'rgba(155,215,255,1)',
        data: [3],        // data: [3, 0, 4, 4, 3],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }]

});

$（“#容器一号”）。高图({
图表：{
类型：'bar'，
活动：{
单击：功能（事件）{
console.log（event.pageX+'，'+event.pageY）；
}
}
},
学分：{
已启用：false
},
标题：{
正文：“水果消费总量，按性别分组”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]，
第1.1节，
maxPadding:1.1
},
亚克斯：{
allowDecimals:false，
分:0,，
标题：{
文本：“水果数量”
}
},
工具提示：{
启用：false，
格式化程序：函数（）{
返回“+this.x+”
“+this.series.name+”：“+this.y+”
”+
“总计：”+this.point.stackTotal；
}
},
打印选项：{
//专栏：{
//堆叠：“正常”
// }
系列：{
点宽：20，
堆叠：“正常”，
边框宽度：0，
活动：{
单击：功能（事件）{
//重新加载flash（）；
//$（“#报告”）.html（'点击yAxis标题'）；
console.log（event.pageX+'，'+event.pageY）；
}
}
}
},
系列：[{
姓名：'约翰'，
颜色：“rgba（89,89,89,1）”，
数据：[5]，//数据：[5,3,4,7,4]，
堆栈：'男性'，
点填充：-0.0，
点位置：-0.0
}, {
名字：'乔'，
颜色：“rgba（255,95215,1）”，
数据：[3]，//数据：[3,4,4,2,2]，
堆栈：'男性'，
点填充：-0.0，
点位置：-0.0
}, {
姓名：'简'，
颜色：“rgba（217116,0,1）”，
数据：[2]，//数据：[2,5,6,2,1]，
堆栈：“女性”，
点填充：-0.0，
点位置：-0.0
}, {
姓名：“珍妮特”，
颜色：“rgba（155215255,1）”，
数据：[3]，//数据：[3,0,4,4,3]，
堆栈：“女性”，
点填充：-0.0，
点位置：-0.0
}]
});

我如何减少酒吧间的空间

---

如果更改图表的高度是一种解决方案，那么如何动态地实现这一点

您在系列中使用的'pointWidth:20'是什么？？这就是问题的根源。。此外，您还提供了类别：[“苹果”、“橙子”、“梨”、“葡萄”、“香蕉”]即使数据仅针对苹果。。一种解决方案是动态生成类别。。例如，如果数据仅针对苹果，则只推类别数组中的苹果。然后，您可以使用：

 _chart.setSize(width,height)

---

方法动态设置highchart的新高度和宽度。另外，删除点宽度将解决此问题

您可以使用的选项有：

plotOptions:{
    bar:{
        pointPadding: 0,
        groupPadding: 0,
    }
}

但你也不需要强制你的酒吧点宽度

删除：

series: {
            pointWidth: 20,

API文档讨论了这些选项之间的关系：

删除“点宽度”解决了条之间的空白。但我需要在所有可能的情况下，栏杆的高度都应该相同。我已经通过基于类别计数动态设置高度解决了这个问题。例如，如果我只有一个类别，我已经将图表的高度设置为“210”，将两个类别的高度设置为“270”。并删除了点宽度

$('#container-one').highcharts({

    chart: {
        type: 'bar',
        height: 210,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

当我有两个类别时，我将图表高度设置为270

$('#container-two').highcharts({

    chart: {
        type: 'bar',
        height: 270,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

和

也许是我做错了。但它解决了我的问题。如果我错了，请纠正我

---

谢谢大家

事实上，问题来自

点宽度

——禁用后，工作正常：感谢各位的回复。删除“pointWidth”解决了条之间的空白。但我需要在所有可能的情况下，栏杆的高度都应该相同。我已经通过基于类别计数动态设置高度解决了这个问题。例如，如果我只有一个类别，我已经将图表的高度设置为“210”，将两个类别的高度设置为“270”。并删除了点宽度。将在下面添加带有fiddle链接的答案，感谢@SteveP的回复。删除了pointWidth并使用了填充以避免条之间的间距。为了保持条形图的宽度，我为不同类别的图表动态设置了高度，这也是我从服务器动态获取的。这是测试小提琴的链接有没有最好的方法？如果我有超过8个类别，那么像这样写是不好的。有谁能找到更好的解决办法吗？@RAVIPATEL我已经多年没有做过这个了，希望图书馆能在这个时候解决这个问题，也许可以查一下。没有。图书馆还没有解决这个问题。