HighCharts直方图-具有硬编码高度的重叠项

icomxhvb 于 9个月前发布在 Highcharts

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

我有一个非常具体的要求，可以表现为：

问题是菱形。这基本上是一个自己的时间序列，只有一个值，表示当前登录用户的值。
我发现了几种方法来添加自定义svg（https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/infographic/），我可以配置它，有一个自定义的高度等，但（即使有可怕的HighCharts ChatGPT的帮助）我不能做以下工作：

菱形需要考虑一个逻辑值（当前用户的生物多样性点），但必须与其他时间序列重叠
菱形与x轴的值重叠，我也无法使其工作
菱形需要有一个特定的高度和宽度，独立于逻辑值->宽度可以使用pointWidth属性，但高度不可能

我也尝试过其他方法，比如标记，但似乎没有一个符合要求。有人有意见吗？如何根据HighCharts apis解决菱形问题？

highcharts

来源：https://stackoverflow.com/questions/77057620/highcharts-histogram-overlapping-item-with-hardcoded-height

1条答案

按热度按时间

ljo96ir51#

我想你要找的解决方案是用Highcahrts.SVGRenderer画菱形。您可以在图表上的每个位置呈现它，也可以使用逻辑值。下面是一个基本的例子：

chart: {
    type: 'column',
    events: {
      render: function() {
        const chart = this,
          renderer = chart.renderer,
          point = chart.series[0].points[2],
          rhombusSize = chart.series[0].points[2].y,
          xPos = chart.plotLeft + point.plotX - (rhombusSize / 2),
          yPos = chart.plotTop + chart.plotHeight - (rhombusSize / 2);

        if (!chart.rhombus) {
          chart.rhombus = renderer.symbol('diamond', 0, 0, rhombusSize, rhombusSize)
            .attr({
              fill: 'red',
              zIndex: 10
            })
            .add();
        }

        chart.rhombus.attr({
          x: xPos,
          y: yPos
        });
      }
    }
  },

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

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