的 DEMO

Question

我使用kendo生成图表

它的2级图表。

Here is the js fiddle with 2 level's of chart

问题是，在 pan＆amp; amp;帮助下缩放图表时在剑道图表中，缩放网格线显示不匹配。

生成图表后的实际图片。

应用pan＆amp;变焦

其实这就是我要找的......剑道没有显示正确的位置

jQuery("#chart").kendoChart({
"chartArea": {
    "height": 500
},
"title": {
    "text": "Working women in Bahrain"
},
"legend": {
    "labels": {
        "template": "#= series.name #"
    },
    "position": "top"
},
"series": [{
    "name": "Divorced",
    "type": "column",
    "data": [85393, 77464, 96399, 83679, 115378, 96117, 81731, 77118, 86773, 89057, 101897, 81349],

    "stack": false
}, {
    "name": "Married",
    "type": "column",
    "data": [77220, 85787, 94838, 92456, 93399, 89375, 79801, 87342, 105411, 100824, 94300, 92005],        
    "stack": false
}, {
    "name": "Single",
    "type": "column",
    "data": [102443, 91787, 100185, 86968, 99938, 104390, 102129, 98333, 92575, 69093, 88107, 84893],        
    "stack": false
}, {
    "name": "Widow",
    "type": "column",
    "data": [97150, 85356, 97143, 95212, 97313, 93572, 87118, 91988, 103927, 91054, 93480, 90099],        
    "stack": false
}],
"categoryAxis": [{
    "labels": {
        "rotation": {
            "angle": "auto"
        }
    },
    "majorGridLines": {
        "visible": false
    },
    "title": {
        "text": "Sectors",
        "position": "left"
    },
    "categories": ["Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public"]
}, {
    "labels": {
        "rotation": {
            "angle": "auto"
        }
    },
    "majorGridLines": {
        "visible": true
    },
    "line": {
        "visible": true
    },
    "title": {
        "text": "Year",
        "position": "left"
    },
    "categories": ["2010", "2011", "2012", "2013", "2014", "2015"]
}],
"valueAxis": [{
    "majorGridLines": {
        "visible": false
    }
}],    
"tooltip": {
    "format": "{0}%",
    "template": "#= series.name #: #= value #",
    "visible": true
},
"pannable": {
    "lock": "y"
},
"zoomable": {
    "mousewheel": {
        "lock": "y"
    },
    "selection": {
        "lock": "y"
    }


  }
});

Answer 1

可能不是您想要的，但对于年份轴，请确保每年两次具有与扇区轴相同数量的类别。然后对标签，majorTicks和majorGridLines使用 step property ：

{
    "labels": {
        "rotation": {
            "angle": "auto"
        },
        step: 2
    },
    "majorGridLines": {
        "visible": true,
        color: "black",
        step: 2
    },
    majorTicks: {
        step: 2
    },
    "line": {
        "visible": true
    },
    "title": {
        "text": "Year",
        "position": "left"
    },
    "categories": ["2010", "2010","2011","2011", "2012","2012", "2013","2013", "2014","2014", "2015", "2015"]
}

的 DEMO

Answer 2

@ezanker

<强> Code Pen Demo

http://codepen.io/prasadraja07/pen/ZOqQWq/

我创建了另一个codepen，以便通过..

通知问题

我已将图像附加到舞台级别

**生成图表级别1 **

平移/缩放后

在缩放/平移时发出图像，与主要网格线不匹配

    jQuery("#chart").kendoChart({
        "chartArea": {
            "height": 500
        },
        "title": {
            "text": "Testing"
        },
        "legend": {
            "labels": {
                "template": "#= series.name #"
            },
            "position": "top"
        },
        "series": [{
            "name": "Private",
            "type": "column",
            "data": [2647.67, 2273.22, 2685.17, 2455.22, 2506.39, 2603.03, 2790.78, 2893.28, 2722.17, 2807.06, 2894.61, 2854.72, 2122, 2883.83, 2384.44, 2353.58, 3053.56, 2350.03, 2822.92, 2570.33, 2679.78, 2398.89, 2685.22, 2730.11],
            "labels": {
                "visible": true
            },
            "stack": false
        }, {
            "name": "Public",
            "type": "column",
            "data": [2111.03, 2309.56, 2203.75, 2831.06, 2430.86, 2666.58, 2382.61, 2473.14, 2553.5, 2700, 2851.81, 2546.19, 2097.92, 2684.31, 2485.89, 2586.92, 2338.94, 2535.83, 2272.75, 2575.47, 2458.39, 2740.58, 2160.53, 2316.78],
            "labels": {
                "visible": true
            },
            "stack": false
        }],
        "categoryAxis": [{
            "labels": {
                "rotation": {
                    "angle": "auto"
                }
            },
            "majorGridLines": {
                "visible": false
            },
            "title": {
                "text": "Governorate",
                "position": "left"
            },
            "categories": [
                                                                "Category1", "Category2", "Category3", "Category4", "Category1", "Category2", "Category3", "Category4", "Category1", "Category2", "Category3", "Category4", "Category1", "Category2", "Category3", "Category4", "Category1", "Category2", "Category3", "Category4", "Category1", "Category2", "Category3", "Category4"]
        }, {
            "labels": {
                "visible": true,
                "step": 4,
                "rotation": {
                    "angle": "auto"
                }
            },
            "majorGridLines": {
                "width": 1,
                "step": 4,
                "color": "black",
                "visible": true
            },
            "title": {
                "text": "Year",
                "position": "left"
            },
            "majorTicks": {
                "step": 4
            },
            "categories": ["2010", "2010", "2010", "2010", "2011", "2011", "2011", "2011", "2012", "2012", "2012", "2012", "2013", "2013", "2013", "2013", "2014", "2014", "2014", "2014", "2015", "2015", "2015", "2015"]
        }],
        "valueAxis": [{
            "majorGridLines": {
                "visible": false
            }
        }],
        "transitions": false,
        "tooltip": {
            "format": "{0}%",
            "template": "#= series.name #: #= value #",
            "visible": true
        },
        "pannable": {
            "lock": "y"
        },
        "zoomable": {
            "mousewheel": {
                "lock": "y"
            },
            "selection": {
                "lock": "y"
            }
        }
    });

剑道多级条形图问题缩放问题

2 个答案:

的 DEMO