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

我用剑道生成了图表

其2级图表

问题是，在剑道图中使用平移和缩放缩放图表时，网格线显示不匹配

生成图表后的实际图像。

应用平移和缩放后

实际上这就是我要找的……剑道没有显示正确的位置

---

可能不完全是您想要的，但是对于年份轴，确保您的类别数量与部门轴相同，每年两次。然后使用标记、主标记和主标记线：

{
    "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"]
}

@ezanker

我为您创建了另一个代码笔来通知问题

我已附加在舞台级的图像

**生成图表级别1**

平移/缩放后

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

---

@当我缩放图表时（在平移和缩放的帮助下），这条主要的网格线显示在错误的位置。。。如果对此应用平移和缩放。。。。你可以看到问题…@PrasadRaja，通过我的更改，主网格线现在在任何缩放级别都是正确的：使用鼠标滚轮放大codepen演示。该示例存在问题（当你平移/缩放图表时，我们根据公共/私人的年份有主网格线，当你拖动/移动轴时，主网格线不匹配）…如果您注意到您可以看到问题。非常感谢您的帮助。@PrasadRaja，对我来说，当我用codepen运行我的示例时，问题已经解决了。你还在代码栏里看到这个问题吗？如果是，在哪个浏览器上？问题是（当您平移/缩放图表时，我们根据公共/私有的年份有主网格线，当您拖动/移动轴时，主网格线不匹配）。。。你注意到了吗？（Chromer浏览器）我现在看到了。我想你应该问问Telerik。

{
    "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"]
}

    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"
            }
        }
    });