將設計添加到plotLabel Highcharts

Question

我正在研究高圖上的動態圖表。我的問題是，有沒有方法在我的標籤上添加設計？ 目前像這樣

而且我希望它看起來像這樣

這裏我的代碼

$(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; 
    }()) 
}] 

}); 

}); 

這裏是供你參考http://jsfiddle.net/t7x2jehn/我的工作代碼

Answer 1

您不能像這樣繪製情節標籤線條，但是您可以使用更多樣式選項創建自己的標籤並對其進行動畫製作 - renderer.label。

創建間隔之前標籤：

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() 

在每個時間間隔，以動畫播放：

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) 
       }) 
      } 
      }), 

例如：http://jsfiddle.net/x8vhp0gr/