Javascript Girl
  1. Javascript Girl
  3. Graphique de la ligne KendoUI, Comment éviter que les étiquettes ne soient dessinées en dehors du graphique?
Intereting Posts
Javascript utilise MutationObserver pour détecter le changement de valeur dans l'étiquette d'entrée Créer un nouveau tableau associatif multidimensionnel à partir de 2 tableaux Stockage des articles du panier dans les cookies et la base de données Comment analyser les objets polymorphes Json.NET? Comment insérer du texte à la position actuelle du caret dans une zone de texte Chrome soudainement arrêté Accepter insertRule () Problème de charge jquery Google's Polymer est-il un cadre Frontend entièrement opérationnel pour remplacer ou compléter d'autres frameworks Frontend? ReferenceError behavior Three.js – Largeur de vue Le code jQuery est toujours en cours d'exécution même après avoir été commenté Définir iframe innerHTML sans charger la page (avec jquery) Comment calculer la zone d'intersection dans l'API Google Maps avec la bibliothèque JSTS? Javascript: comment obtenir plusieurs résultats dans les résultats RegEx .exec Équitation si / else déclaration Javascript

Graphique de la ligne KendoUI, Comment éviter que les étiquettes ne soient dessinées en dehors du graphique?

J'utilise le graphique linéaire KendoUI. J'ai des étiquettes sur un graphique linéaire et les étiquettes sont coupées en haut. Est-ce qu'il y a un moyen d'éviter cela?

Graphique linéaire KendoUI

Voici un projet jsFiddle avec lequel jouer: http://jsfiddle.net/rodneyhickman/2eWYg/1/

Voici ma remarque: 

<div style="padding:20px;" > <div id="divChart"></div> </div>

Voici mon script: 

 jQuery('#divChart').kendoChart({ seriesDefaults: { type: "line", missingValues: "interpolate" }, legend: { position: "bottom" }, tooltip: { visible: true, format: "{0}%" }, valueAxis: { min: 70, max: 90, plotBands: [{ from: 70, to: 75, color: "#f5f5f5"}, { from: 80, to: 85, color: "#f5f5f5"}, { from: 90, to: 95, color: "#f5f5f5"}] }, series: [{ type: "line", name: "Product 1", color: "#004990", width: 1, markers: { background: "#004990" }, tooltip: { visible: true, template: "<b>Product 1</b><br/>Current Score: #= value #<br/>#= category # " }, labels: { visible: true }, data: [88.71, 88.87, 88.91, 89.39, 89.44, 89.47, 89.39, 89.38, 89.25, 88.81, 88.9, 88.84, 88.79]}, { type: "line", name: "Market Segment", color: "#da7633", width: 1, markers: { background: "#da7633" }, tooltip: { visible: true, template: "<b>Market Segment</b><br/>Current Score: #= value #<br/>#= category # " }, data: [75.9, 75.58, 75.54, 75.19, 74.9, 74.42, 74.51, 74.72, 74.55, 74.44, 74.15, 73.86, 73.79]}], categoryAxis: { labels: { rotation: -45, step: 1, skip: 0 }, categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"] } });​

En ajoutant une marge à l'intrigue, elle ouvre la place aux étiquettes.

PlotArea: {margin: {top: 20, left: 5, right: 5, bottom: 5}},

Voici la solution:

http://jsfiddle.net/rodneyhickman/2eWYg/2/

Vous pouvez configurer la série pour ajouter les étiquettes sous les points – selon les documents ; 

 notes: { position: "bottom" },