Na UI do kendo, como desenhar uma linha vertical em um gráfico de linhas
-
21-12-2019 - |
Pergunta
Como desenhar uma linha vertical em um gráfico de linhas usando Html5 e kendo UI?alguém pode me ajudar a resolver esse problema?
Solução
Experimente isto:
// 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
}
}]
}
}
});
Demonstração: http://jsbin.com/obuweca/26
/*SEM CÍRCULO*/
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMONSTRAÇÃO: http://jsbin.com/obuweca/29/
Outras dicas
Na documentação do kendo há um exemplo de como desenhar linhas personalizadas no gráfico.Horizontal e vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
Você pode personalizar linhas editando o traço:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
Você também pode tentar usar o gráfico de colunas.
Basta estender a série:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
e o dataSource.data com um novo campo como:valorColuna.
Veja também o Exemplo.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow