highcharts 高精度图表在x轴和y轴的末端绘制形状(箭头),

6qftjkof  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(237)

是否可以在Axis的末端绘制形状?(见图)

我已经看了所有的文档,真的找不到任何关于这个特定问题的东西?

qrjkbowd

qrjkbowd1#

如果你想画一个箭头,你可以从Highcharts演示页面中查看general drawing demo。有使用Highcharts.SVGRenderer来渲染箭头,你可以将其转换为轴。

chart: {
    events: {
      render: function() {
        var chart = this,
          xAxisLeft = chart.xAxis[0].left,
          xAxisHeight = chart.xAxis[0].height + chart.xAxis[0].top,
          rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5];

        if (chart.myPath) {
          chart.myPath.destroy();
        }

        chart.myPath = chart.renderer.path(rightArrow)
          .attr({
            'stroke-width': 1,
            stroke: '#ccd6eb',
            fill: 'none'
          })
          .translate(95, 95)
          .add();
      }
    },
  },

现场演示:https://jsfiddle.net/BlackLabel/t2m573wr/

相关问题