将chart.renderer.path制作为情节Highcharts [英] Make chart.renderer.path as plotline Highcharts

问题描述

我只是使用renderer.label和plotline animate来检查有关使用设计制作标签的帖子（将设计添加到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 
} * / 
}）; 
 $ b $ const labelOffset = 15 
 const plotbandLabel = this.renderer.label（（66）.toFixed（2），chart.plotLeft + chart.plotWidth  -  8，yAxis.toPixels（66） （{
 color：'#FFFFFF'
}）。attr（{
 align：'right'，
 zIndex：99，
 fill：'rgba（0，0，0，0.75）'，
 padding：8 
}）
 .add（）
 
 setInterval（function （）{
 
 var x =（new Date（））。getTime（），//当前时间
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 
}，{
持续时间：400，
 step：function（）{
 this.attr（{
 text：yAxis.toValue（this.y + labelOffset）.toFixed（2）
}） 
}，
 complete：function（）{
 this.attr（{
 text：y.toFixed（2）
}）
} 
 $）
 
 $ b plotLine.animate（{
 translateY：newY 
}，400）; 
  

请参阅上一篇文章中的jsfiddle。 http://jsfiddle.net/x8vhp0gr/
非常感谢你

解决方案

我修改了您提供的演示。

  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/

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

解决方案

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/

这篇关于将chart.renderer.path制作为情节Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！