javascript - rotuladores - como revivir marcadores permanentes
Usando KendoUI Line Chart, ¿Cómo hacer que los marcadores de datos(Puntos) tengan un color sólido? (1)
En los marcadores de uso de objetos de la serie : {background: "# 004990"}, // Use el color de fondo de su unidad .
Para configurar el valor de la barra también use la propiedad ancho: 1 .
Aquí está la solución jsfiddle con la que puede jugar: http://jsfiddle.net/rodneyhickman/uMTnh/3/
Aquí está la imagen resultante:
El nuevo script jQuery se ve así:
jQuery(''#chart'').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left",
font: "18px Arial, Verdana, sans-serif",
color: "#444"
},
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
legend: {
position: "bottom"
},
tooltip: {
visible: true,
format: "{0}%"
},
valueAxis: {
min: 70,
max: 85,
plotBands: [{
from: 70,
to: 75,
color: "#EDF5FF"},
{
from: 80,
to: 85,
color: "#EDF5FF"}]
},
series: [{
name: "Some Product",
color: "004990",
width: 1,
markers: { background: "#004990" },
size: 2,
tooltip: {
visible: true,
template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
{
name: "Some Market Segmemt",
color: "da7633",
width: 1,
markers: { background: "#da7633" },
tooltip: {
visible: true,
template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
categoryAxis: {
labels: {
rotation: -45,
step: 1,
skip: 0
},
categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
}
});
Estoy usando la interfaz de usuario de Kendo para reemplazar un gráfico existente. Necesito minimizar los cambios entre los gráficos. ¿Alguien sabe cómo hacer que los puntos en el Line Chart sean sólidos? ¿Es posible hacer la línea más delgada?
Esta es mi imagen de mi gráfico:
Aquí está mi proyecto jsFiddle si quieres jugar con él: http://jsfiddle.net/rodneyhickman/uMTnh/2/
Mi html se ve así:
<div id=''chart'' ></div>
Mi secuencia de comandos jQuery parece:
jQuery(''#chart'').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left",
font: "18px Arial, Verdana, sans-serif",
color: "#444"
},
seriesDefaults: {
type: "line",
missingValues: "interpolate",
},
legend: {
position: "bottom"
},
tooltip: {
visible: true,
format: "{0}%"
},
valueAxis: {
min: 70,
max: 85,
plotBands: [{
from: 70,
to: 75,
color: "#EDF5FF"},
{
from: 80,
to: 85,
color: "#EDF5FF"}]
},
series: [{
name: "Some Product",
color: "004990",
tooltip: {
visible: true,
template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
{
name: "Some Market Segmemt",
color: "da7633",
tooltip: {
visible: true,
template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
categoryAxis: {
labels: {
rotation: -45,
step: 1,
skip: 0
},
categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
}
});
Cualquier ayuda sería apreciada.