Блог

Мне нужна помощь, чтобы установить ширину полос в столбчатых диаграммах кендо, когда количество полос уменьшается. Вот ссылка на jsFiddle, над которой я работаю: http://jsfiddle.net/An59E/44 /

В этом примере есть 2 гистограммы кендо, 1 имеет 6 баров, а другая — 12 баров. На втором графике ширина полос в порядке. Теперь, когда я удаляю 2 полосы, мне нужна одинаковая ширина полос, вместо этого поведение кендо по умолчанию заключается в изменении размера полос. установив значения интервала и интервала, размеры полос должны измениться. В этом примере я установил значение интервала и пробелов в атрибуте series defaults, но похоже, что он не работает. Теперь вопрос в том, как изменить ширину полос?

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

Спасибо.

просто замените приведенный ниже фрагмент кода на javascript, и все готово!

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

В приведенном выше коде я добавил значение разрыва, чтобы определить разрыв между столбцами, что приводит к тому, что они становятся тонкими, как вы хотите.

Пожалуйста, обратитесь к приведенному ниже js fiddle.

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

Пожалуйста, дайте мне знать, если у вас возникнут какие-либо трудности с реализацией того же.