highcharts 在两个蓬特之间画一个动态圆，两个箭头带有高度图：实际的真实的日期和某个(x，y)点

ipakzgxi 于 5个月前发布在 Highcharts

关注(0)|答案(1)|浏览(43)

我使用hightcharts与角，
我需要画一个动态圆，作为开始（x，y）点，直到实际日期轴。
我的angular ts代码：

`xAxis: {`
`type: 'datetime',`
`lineWidth: 0,`
`tickPositions: [...this.tickPositions],`
`labels: {`
`x: 0,`
`y: chartStyles.y,`

          formatter(): any {
            //@ts-ignore
            let dateLabel = Highcharts.dateFormat('%H:%M',new Date(this.value));
    
            //@ts-ignore
            return (
              '\<span style="width:10px; height:24px; color:var(--chart-text-color); background-color: var(--rectangle-bg-color);  padding: 3px 4px;margin-top:90px; margin-bottom:10px; border-radius:4px;"\>' +
              dateLabel +
              '\</span\>'
            );
          },
          useHTML: true,
        },
    
        min: this.slotsStart(),
        max: this.slotsEnd(),
        gridLineColor: '#e6e6e6',
        gridLineWidth: 0.5,
        plotLines: \[
          {
            name: 'Current Time',
            color: 'var(--default-text-color)',
            width: 2,
            value: this.getCurrentDate(),
            zIndex: 6,
            label: {
              text: \`${this.getUTCRealtimeFormatedDate()}\`,
              align: 'bottom',
              x: -22,
              y: 287,
              enabled: true,
              rotation: 0,
              formatter() {
                //@ts-ignore
                return '\<span style="display: inline-block;color:var(--chart-text-color); background-color: var(--rectangle-bg-color);padding: 3px 4px;border-radius:4px;"\>' +Highcharts.dateFormat('%H:%M', new Date(this.options.value)) +'\</span\>'
                
              },
              useHTML: true,
            } as any,
          },
        \],
      },
    
      yAxis: {
        lineWidth: 0,
        gridLineDashStyle: 'longdash',
        gridLineColor: 'var(--chart-row-color)',
        max: 45,
        min: 0,
        title: {
          text: '',
        },
        labels: {
          x: -5,
          y: 8,
    
          formatter() {
            return (
              '\<span style="width:20px; height:24px; color:var(--chart-text-color); background-color: var(--frame-color); padding: 3px 6px; margin-bottom:10px; border-radius:4px;"\>' +
              this.value +
              '\</span\>'
            );
          },
          useHTML: true,
        } as any,
      },
    
      series: this.series,

字符串
在实际日期（真实的时间，每秒变化）和其他固定时间点（Xtimestemps，Yvalue）之间画一个带两个箭头的圆（箭头长度的水平变化与这两个点（固定点，变化点）无关）

highcharts

来源：https://stackoverflow.com/questions/77633102/draw-a-dynamic-circle-with-two-arrow-with-hightcharts-between-two-pont-actual

1条答案

按热度按时间

luaexgnf1#

您可以使用Highcharts.SVGRenderer创建标签或形状。在图表的render（）事件中执行绘制以确保响应性。此外，您可以通过从此事件访问兴趣点来标识兴趣点。
这里有一个简化的例子供您参考：

chart: {
    events: {
      render: function() {
        let chart = this,
          series = chart.series[0],
          points = series.points,
          lastPoint = points[points.length - 1],
          previousPoint = points[points.length - 2],
          xAxis = chart.xAxis[0],
          yAxis = chart.yAxis[0],
          x1 = xAxis.toPixels(previousPoint.x),
          y1 = yAxis.toPixels(previousPoint.y),
          x2 = xAxis.toPixels(lastPoint.x),
          y2 = yAxis.toPixels(lastPoint.y),
          arrowSize = 10,
          labelX = (x1 + x2) / 2,
          labelY = (y1 + y2) / 2;

        if (!chart.label) {
          chart.label = chart.renderer.label('Label')
            .attr({
              r: 10,
              stroke: 'gray',
              fill: 'green',
              'stroke-width': 1,
              zIndex: 40,
            })
            .css({
              color: 'white'
            })
            .add();
        }

        chart.label.attr({
          x: labelX - chart.label.width / 2,
          y: labelY - chart.label.height / 2
        });

        if (chart.arrows) {
          chart.arrows.forEach(arrow => arrow.destroy());
        }

        chart.arrows = [
          chart.renderer.path(['M', labelX, labelY, 'L', x1, labelY, 'M', x1 + 10, labelY - 10, 'L', x1, labelY, 'L', x1 + 10, labelY + 10]).attr({
            'stroke-width': 5,
            stroke: 'green',
            zIndex: 2
          }).add(),
          chart.renderer.path(['M', labelX, labelY, 'L', x2, labelY, 'M', x2 - 10, labelY - 10, 'L', x2, labelY, 'L', x2 - 10, labelY + 10]).attr({
            'stroke-width': 5,
            stroke: 'green',
            zIndex: 2
          }).add()
        ];
      }
    }
  },

字符串

Demo：https://jsfiddle.net/BlackLabel/g3Lpk7a4/
API引用：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer https://api.highcharts.com/highcharts/chart.events.render

赞(0）回复(0）举报 5个月前