本文介绍了将设计添加到plotLabel Highcharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究高图上的动态图表。我的问题是，有没有方法在我的标签上添加设计？ 目前就像这样
I am working on the dynamic chart on highchart. My question is, Is there a way to add design on my plotlabel? Currently it like this
我希望它看起来像这样
这里我的代码
Here my code
$(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; }()) }] }); });以下是我参考的工作代码 jsfiddle/t7x2jehn/
Here is my working code for your reference jsfiddle/t7x2jehn/
推荐答案您不能像这样设计风格线条标签，但是你可以用更多样式选项创建你自己的标签，并为它制作动画 - renderer.label 。
You cannot style plot line label like this, but you can create your own label with more styling options and animate it - renderer.label.
在间隔之前创建标签：
Create a label before interval:
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()在每个interva上l，为它设置动画：
On each interval, animate it:
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) }) } }),示例： jsfiddle/x8vhp0gr/
更多推荐
将设计添加到plotLabel Highcharts
发布评论