Kendo ui 使用间隙和间距设置条形图宽度-剑道条形图？

我需要一些帮助来设置剑道条形图中条形的宽度，当条形的数量减少时。 下面是我正在研究的JSFIDLE链接：

在这个例子中，有两个剑道条形图，一个有6条，另一个有12条。 在第二张图中，条形图的宽度很好。现在，当我移除两个条时，我需要相同宽度的条，而剑道的默认行为是调整条的大小。通过设置间距和间隙值，钢筋应调整大小。在本例中，我在“序列默认值”属性中设置了“间距”和“间隙”值，但它看起来不起作用。现在的问题是，如何改变酒吧的宽度

HMTL代码：

<div id="chart1">
</div>
<div id="chart2">
</div>

JS代码：

var series1= [70, 60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];

$("#chart1").kendoChart({
  seriesDefaults: 
        {
      type: "column",
      stack: true,
      width:2,
      gap: 50,
  },
    series: 
    [

        {
            data: series1,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            spacing: 0
        },                 
        {    
            data: series2, 
            color: "#CCCCCC"    
        }
    ],
    plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300
    },
    categoryAxis: 
    {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#CCCCCC"},
            ],
                },
                seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },

        }, 
    valueAxis:
                { 

            title:
            { 
                text: "A"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            /*format: "{0}"*/
                template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
        }
});
                $("#chart2").kendoChart({
                series: 
                [
                {
                data: series3,   
                color: "#00CC00",
                negativeColor: "#CC0000",
                spacing: 0
                },                 
                {    
                    data: series4, 
                    color: "#CCCCCC"    
                }
                ],
        plotArea: 
        {
            border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300,
    },
    categoryAxis: 
        {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#333333"},
            ],
                /*categories: [2005, 2006, 2007, 2008, 2009, 2010],
                 labels: 
                {
                    margin: 
                    {
                        top: 100,
                    }
                },*/
        },
    seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },
        }, 
    valueAxis: 
        { 
            title:
            { 
                text: "O"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            /*format: "{0}"*/
                template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
        }
});

var系列1=[70,60,40]；
变量系列2=[-50,40,20]；
var序列3=[60,60，-90,60,10,50]；
变量系列4=[60,20,20,50,40,10]；
$（“#图表1”）。肯多卡特({
系列默认值：
{
键入：“列”，
斯塔克：没错，
宽度：2，
差距：50，
},
系列：
[
{
数据：系列1，
颜色：“00CC00”，
负片颜色：#CC0000“，
间距：0
},                 
{    
数据：系列2，
颜色：“中交”
}
],
绘图区域：
{
边界：
{
颜色：“#中交”，
宽度：1
}
},
图表区：
{
边界：
{
颜色：“#中交”，
宽度：1
},
身高：300
},
类别：
{
窗格：“顶部窗格”，
颜色：“0099FF”，
主要生产线：
{
可见：对，
},
行：
{
宽度：3，
},
绘图带：
[
{从：0到：1，颜色：#cccc}，
],
},
系列默认值：
{
键入：“列”，
标签：
{    
可见：对，
颜色：“绿色”
},
}, 
valueAxis：
{ 
标题：
{ 
案文：“A”
},  
主要生产线：
{ 
可见：假
},
标签：
{    
可见：假，
},
行：
{
可见：假
}
},
工具提示：{
可见：对，
/*格式：“{0}”*/
模板：“机构成果：#=价值#
机构目标：#=价值#
”
}
});
$（“#图表2”）。肯多卡特({
系列：
[
{
数据：系列3，
颜色：“00CC00”，
负片颜色：#CC0000“，
间距：0
},                 
{    
数据：系列4，
颜色：“中交”
}
],
绘图区域：
{
边界：
{
颜色：“#中交”，
宽度：1
}
},
图表区：
{
边界：
{
颜色：“#中交”，
宽度：1
},
身高：300，
},
类别：
{
窗格：“顶部窗格”，
颜色：“0099FF”，
主要生产线：
{
可见：对，
},
行：
{
宽度：3，
},
绘图带：
[
{从：0到：1，颜色：#333333}，
],
/*类别：[2005、2006、2007、2008、2009、2010]，
标签：
{
保证金：
{
前100名，
}
},*/
},
系列默认值：
{
键入：“列”，
标签：
{    
可见：对，
颜色：“绿色”
},
}, 
valueAxis：
{ 
标题：
{ 
案文：“O”
},  
主要生产线：
{ 
可见：假
},
标签：
{    
可见：假，
},
行：
{
可见：假
}
},
工具提示：{
可见：对，
/*格式：“{0}”*/
模板：“机构成果：#=价值#
机构目标：#=价值#
”
}
});

---

谢谢。

只要用javascript替换下面的代码片段，就完成了

seriesDefaults: 
    {
     type: "column",
        labels: 
        {    
            visible: true,
            color: "green"
        },
            gap: 5,
    }, 

在上面的代码中，我添加了间隙值来定义钢筋的间隙，从而使钢筋变薄

请参考下面的js小提琴

请让我知道，如果你面临任何困难，以实现同样的