代码之家 › 专栏 › 技术社区 › Jim

在海图中绘制多色自定义符号

highcharts javascript

1

Jim · 技术社区 · 7 年前

我需要以特定的间隔在海图上绘制自定义标记。我已经使用以下javascript创建了一个自定义栏:

highcharts.renderer.prototype.symbols.hline=
函数(x,y,宽度,高度){
返回['M',X-30,Y+高度/2,'L',X+宽度+30,Y+宽度/2];
}(二)
https://jsfiddle.net/jimmain/9gqca584/5/

我的问题是,我还需要在粉色框周围绘制一个单像素边框。
我正在为图表使用堆积条形图。


理想情况下,我也希望增加条下的填充物(在条和X轴之间),但我不确定它是否可以独立增加。




我不清楚如何使用渲染器来更改颜色。我可以只画一个黑框,然后在顶部再画一个较小的插入粉红色框,但我不清楚如何在SVG渲染器中更改颜色。


https://jsfiddle.net/jimmain/9gqca584/5/

我的问题是我还需要画一个粉红色框周围的单像素边框.

我正在使用堆积条形图绘制图表。

理想情况下我也想增加条下的填充物(在横杆和X轴之间)但我不确定它是否可以独立增加。



我不清楚如何使用渲染器来更改颜色。我可以只画一个黑框,然后在顶部再画一个小的插入粉红色框,但我不清楚如何在SVG渲染器中更改颜色。

1 回复 | 直到 7 年前

1

0

PaweÅ Fus 7 年前

SVG的路径不能有边界,所以解决方案是使用 renderer.rect() 以下内容: https://jsfiddle.net/BlackLabel/9gqca584/43/

注:这是 bar 系列,所以图表是颠倒的,这意味着我们需要用y替换x,用宽度替换高度。

代码段:

function addRect(chart) {
  return chart.renderer.rect(
    chart.yAxis[0].toPixels(5) - 4, // 4 = half width
    chart.xAxis[0].toPixels(0),
    8,
    5
  ).attr({
    fill: 'rgba(253,0,154,0.9)',
    stroke: 'black',
    'stroke-width': 2,
    zIndex: 5
  }).add();
}

function positionRect(chart, rect) {
  rect.animate({
    x: chart.yAxis[0].toPixels(5) - 4, // 4 = half width
    y: chart.xAxis[0].toPixels(0) - chart.series[0].points[0].pointWidth / 2,
    height: chart.series[0].points[0].pointWidth
  });
}

$(function() {
  $('#container').highcharts({
    legend: {
      enabled: false
    },
    chart: {
      type: 'bar',
      events: {
        load: function() {
          this.customRect = addRect(this);
          positionRect(this, this.customRect);
        },
        redraw: function() {
          positionRect(this, this.customRect)
        }
      }
    },
    ...
  });
});