highcharts - प्लैट लेबेल हाईचर्ट्स के लिए डिजाइन जोड़ें



highstock (1)

मैं उच्च चार्ट पर गतिशील चार्ट पर काम कर रहा हूं I मेरा सवाल है, क्या मेरे प्लॉटलेबेल पर डिजाइन जोड़ने का एक तरीका है? वर्तमान में यह इस तरह से पसंद है

और मैं इसे इस तरह देखना चाहता हूं

यहाँ मेरा कोड

$(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/


आप इस तरह से प्लैट लाइन लेबल शैली नहीं कर सकते, लेकिन आप अधिक स्टाइल विकल्पों के साथ अपना खुद का लेबल बना सकते हैं और इसे चेतन कर सकते हैं - 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/