Question

当条形数减少时，我需要一些帮助来设置剑道条形图中条形的宽度。这是我正在处理的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/>"
        }
});

感谢。

Answer 1

只需在javascript中替换下面的代码段即可完成！

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

在上面的代码中，我添加了间隙值来定义条纹的间隙，这样可以使它们变薄。“

请参阅以下js小提琴。

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

如果你遇到任何困难，请告诉我。

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

1 个答案: