对齐Kendo UI条形图的左侧

Question

我有一张如上图所示的条形图。我正在从json文件创建三个图表。

我需要对齐所有图表的左边，使其全部在同一行

 function ShowResults() {
                    $.ajax({
                        type: "GET",
                        url: "/Ajax/xyz.aspx?requesttype=xxxx&y=2",
                        async: false,
                        success: function (data) {
                            if (JSON.parse(data).length > 0) {
                                var chartData = JSON.parse(data);
                                CreateEatingChart(chartData);
                                CreateExerciseChart(chartData);
                                CreateCopingChart(chartData);
                            }
                        }
                    });
                }

                function CreateEatingChart(_chartData) {
                    var result = $.grep(_chartData, function (e) { return e.Pattern_Type == 'Eating'; });
                    var lowResult = $.grep(result, function (e) { return e.Score <= 50; });
                    var highResult = $.grep(result, function (e) { return e.Score > 50; });


                    $("#divEating").kendoChart({
                        seriesColors: ["green", "red"],

                        chartArea: {
                            background: ""
                        },

                        title: {
                            text: "Eating",
                            font: "18px Arial,Helvetica,sans-serif bold",
                            color: 'black'
                        },

                        legend: {
                            visible: false,
                        },

                        chartArea: {
                            background: ""
                        },

                        seriesDefaults: {
                            type: "bar",
                            stack: true,
                            overlay: {
                                gradient: "none"
                            }
                        },
                        series: [{
                            name: 'lowResult',
                            data: lowResult,
                            field: "Score",
                            categoryField: "PatternName"
                        },
                        {
                            name: 'highResult',
                            data: highResult,
                            field: "Score",
                            categoryField: "PatternName"
                        }],

                        valueAxis: {
                            majorGridLines: {
                                visible: true
                            },

                            labels: {
                                visible: false,                                    
                            }
                        },

                        tooltip: {
                            visible: true

                        }
                    });

                }

是否可以用空字符串填充左侧的标签，使它们都具有相同的宽度

Answer 1

从css很难做到，因为它是从svg创建的。 我能找到的唯一技巧是添加 ，因此每个图表都有相同的类别长度。

http://jsfiddle.net/bochzchan/H4wy9/

categoryAxis: { 
            categories: ["         Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            majorGridLines: {
            visible: false
             }
},