À Kendo UI comment dessiner une ligne verticale dans un tableau de ligne

Question

Comment dessiner une ligne verticale dans un graphique de ligne à l'aide de HTML5 et de Kendo UI?Quelqu'un peut-il m'aider à résoudre ce problème?

Answer 1

Essayez ceci:

// let chart be the id
$("#chart").kendoChart({
     categoryAxis: {
         notes: {
             line: {
                 length: 300
             },
             data: [{
                 value: new Date(2012, 0, 3),
                 label: {
                     text: "-" //text you want to show
                 } 
             }]
         }
     }
 });

Demo: http://jsbin.com/obuweca/26

/ * sans cercle * /

$("#chart").kendoChart({
    categoryAxis: {
        notes: {
            line: {
                length: 300
            },
            icon: {
                border: {
                    width: 0
                }
            },
            // Initial notes
            data: [{
                value: new Date(2012, 0, 3)
            }]
        }
    }
});

Demo: http://jsbin.com/obuweca/29/

Answer 2

dans la documentation de Kendo est exemple sur la manière de dessiner des lignes personnalisées sur le graphique.Horizontal et vertical.

http://docs.telerik.Com / Kendo-UI / Controls / Graphiques / How-to / Custom-Plot-Bands

Vous pouvez personnaliser les lignes en édition de la course:

 stroke: {
          color: "red",
          width: 1,
          dashType:"dash"
        }

Answer 3

Vous pouvez également essayer d'utiliser la carte de colonne.

Il suffit d'étendre la série:

  series: [{
                type: "line",
                field: "value",
                categoryField: "date"
            },
            {
                type:"column", 
                field: "valueColumn", 
                gap: 300
            }]

et le datasource.data avec un nouveau champ comme: valeurColumn.

Voir aussi le exemple .