example - Agregar diseño a plotLabel Highcharts

set series highcharts

Question

Estoy trabajando en el cuadro dinámico en Highchart. Mi pregunta es, ¿hay alguna manera de agregar diseño en mi diagramación? Actualmente le gusta esto

Y quiero que se vea así

Aquí mi código

$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$(''#container'').highcharts(''StockChart'', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
hasPlotLine = false,
$button = $(''#button''),
chart = $(''#container'').highcharts(),
yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: 66,
color: ''red'',
width: 2,
id: ''plot-line-1'',
label: {
text: 66,
align: ''right'',
y: newY,
x: 0
}
});
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split('' '');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY: newY,
text: Highcharts.numberFormat(y, 2)
}, {
duration: 400,
step: function() {
$(this.element).html(Highcharts.numberFormat(this.textStr,2));
},
complete: function() { }
}),
plotLine.animate({
translateY: newY
}, 400);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: ''minute'',
text: ''1M''
}, {
count: 5,
type: ''minute'',
text: ''5M''
}, {
type: ''all'',
text: ''All''
}],
inputEnabled: false,
selected: 0
},
title: {
text: ''Live random data''
},
yAxis: [{
opposite: false,
title: {
enabled: false
}
}],
exporting: {
enabled: false
},
series: [{
name: ''Random data'',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});

Aquí está mi código de trabajo para su referencia http://jsfiddle.net/t7x2jehn/

Answer 1

No puede diseñar una etiqueta de línea de trama como esta, pero puede crear su propia etiqueta con más opciones de diseño y animarla: renderer.label .

Crea una etiqueta antes del intervalo:

 const labelOffset = 15
const plotbandLabel = this.renderer.label((66).toFixed(2), chart.plotLeft + chart.plotWidth - 8, yAxis.toPixels(66) - labelOffset, ''rect'').css({
color: ''#FFFFFF''
}).attr({
align: ''right'',
zIndex: 99,
fill: ''rgba(0, 0, 0, 0.75)'',
padding: 8
})
.add()

En cada intervalo, anímalo:

 plotbandLabel.animate({
y: yAxis.toPixels(y) - labelOffset
}, {
duration: 400,
step: function() {
this.attr({
text: yAxis.toValue(this.y + labelOffset).toFixed(2)
})
},
complete: function() {
this.attr({
text: y.toFixed(2)
})
}
}),

ejemplo: http://jsfiddle.net/x8vhp0gr/