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

【问题标题】：set bar width- kendo bar chart using gap and spacing?使用间隙和间距设置条形宽度 - 剑道条形图？
【发布时间】：2014-10-28 13:47:14
【问题描述】：

当条数减少时，我需要一些帮助来设置剑道条形图中条形的宽度。这是我正在处理的 jsFiddle 链接：http://jsfiddle.net/An59E/44/

在本例中，有 2 个剑道条形图，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/>"
        }
});

谢谢。

【问题讨论】：

标签： kendo-ui kendo-dataviz

【解决方案1】：

只需在javascript中替换下面的代码sn-p就可以了！

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

在上面的代码中，我添加了间隙值来定义条的间隙，从而使它们变薄，达到你想要的程度。

请参考下面的js fiddle。

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

如果您在实施时遇到任何困难，请告诉我。

【讨论】：