ich das Diagramm mit Kendo erzeugtKendo Multi-Level-Balkendiagramm Ausgabe Zoom Ausgabe

Sein 2 Niveau des Diagramms.

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

Problem war, wenn sie mit Hilfe von pan & zoom in Kendō Diagramm Gitterlinien zeigt das Mismatch-Diagramm Zoom.

Tatsächliches Bild nach dem Generieren des Diagramms.

Nach der Anwendung Pfanne & Zoom

Eigentlich das, was ich suche ... Kendo nicht korrekte Position zeigt

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


    } 
});

Quelle

2016-08-03 Prasad Raja

Vielleicht nicht genau das, was Sie wollen, aber für die Achse Years, stellen Sie sicher, dass Sie die gleiche Anzahl von Kategorien wie die Sektorachse haben, indem Sie jedes Jahr zweimal. Dann nutzen Sie die step property für Etiketten, majorTicks und majorGridLines:

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

Quelle

2016-08-03 12:27:48 ezanker

@esanker wenn ich die Grafik war zoomen (Mit Hilfe von Pan & Zoom) This Unsere Hauptrasterlinien wurden in der falschen Position zeigen ... wenn Sie pan anwenden & Zoom für diesen .... Sie können das Problem sehen .... –

@PrasadRaja, Mit meinen Änderungen sind die majorgridlines jetzt bei jeder Zoomstufe korrekt: http://codepen.io/ezanker/pen/grdyoR Verwenden Sie Ihr Mausrad, um in die Demo Codepen zu zoomen. – ezanker

Es gab ein Problem mit dem Beispiel (Wenn Sie das Diagramm schwenken/zoomen, haben wir die Hauptgitterlinie entsprechend dem Jahr bezüglich öffentlich/privat, es war nicht passend, wenn Sie die Achse ziehen/bewegen) ... wenn Sie das bemerken kann das Problem sehen. Hilfe wird geschätzt. –

@ezanker

Code Pen Demo

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

Ich habe eine andere codepen für Sie das Problem zu informieren, mit ..

ich das Bild in der Stufe Level

** generieren Diagramm Stufe 1 **

Nach Pan angeschlossen haben/Zoom

Ausgabe Bild auf Zoom/Pan, Mismatch die Hauptrasterlinien

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

Quelle

2016-08-04 10:45:36

Ich sehe es jetzt. Ich denke, Sie sollten Telerik danach fragen. – ezanker

Kendo Multi-Level-Balkendiagramm Ausgabe Zoom Ausgabe

Antwort

DEMO

Verwandte Themen