Question

我只是使用renderer.label和plotline animate（Add design to plotLabel Highcharts）查看有关使用设计制作标签的帖子。我的问题是，有没有办法使用 chart.renderer.path 作为移动的水平网格线而不是使用公共的情节线？我对如何使用renderer.path感到有点困惑。你能帮帮我吗？真的很感谢你的帮助。

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

请看我从上一篇文章中得到的这个jsfiddle。 http://jsfiddle.net/x8vhp0gr/ 非常感谢你

Answer 1

我修改了你提供的demo。现在，不是添加绘图线，而是创建路径。

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

API参考：
http://api.highcharts.com/highcharts/Renderer.path

例：
http://jsfiddle.net/a64e5qkq/

将chart.renderer.path设为plotline Highcharts

1 个答案: