Make chart.renderer.path as plotline Highcharts

2019-08-16 08:31发布

I just check a post regarding making a label with design using renderer.label and plotline animate (Add design to plotLabel Highcharts). My question is, Is there a way to use chart.renderer.path as the moving horizontal gridline instead of using the common plotline ? I am a bit confuse on how to use the renderer.path. Can you help me with it? Really appreciate your help with this.

      const plotband = yAxis.addPlotLine({
        value: 66,
        color: 'red',
        width: 2,
        id: 'plot-line-1',
        /*      label: {
                text: 66,
                align: 'right',
                y: newY,
                x: 0
            }*/
      });

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

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


          plotLine.animate({
            translateY: newY
          }, 400);

Please see this jsfiddle I got from the previous post. http://jsfiddle.net/x8vhp0gr/ Thank you so much

1条回答
我想做一个坏孩纸
2楼-- · 2019-08-16 08:53

I modified demo provided by you. Now, instead of adding a plot line, path is created.

pathLine = this.renderer.path([
    'M',
    chart.plotLeft, 
    initialValue,
    'L',
    chart.plotWidth + chart.plotLeft,
    initialValue
  ])
  .attr({
    'stroke-width': 2,
    stroke: 'red'
  })
  .add(svgGroup);

API Reference:
http://api.highcharts.com/highcharts/Renderer.path

Example:
http://jsfiddle.net/a64e5qkq/

查看更多
登录 后发表回答