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

当条数减少时，我需要一些帮助来设置kendo条形图中条的宽度。这里是我正在使用的jsFiddle链接：http://jsfiddle.net/An59E/44/设置栏宽度 - 使用间隙和间距的剑道条形图？

在这个例子中，有2个kendo条形图，1个有6个小节，另一个有12个小节。在第二个图中，条宽很好。现在，当我删除2个酒吧，我需要相同的酒吧宽度，而不是默认的行为是改变酒吧。通过设置间距和间距值，条形应调整大小。在这个例子中，我已经设置了系列默认属性中的间距和间距值，但它看起来不像它的工作。现在的问题是，如何改变酒吧的宽度？

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

感谢。

来源

2014-06-18 user2439903

只需在javascript中替换下面的代码片段，就完成了！

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

在上面的代码中，我添加了间隙值来定义酒吧的差距，导致他们变薄，你想要的。

请参阅下面的js小提琴。

http://jsfiddle.net/An59E/134/

请让我知道，如果你面对实现相同的任何困难。

来源

2014-10-28 05:47:14

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

回答

相关问题