如何在高图表标志中设置风格图像？

在我的图表中，我显示用户图片的评论日期，以便用户可以使用这些图标阅读工具提示中的评论。它看起来像soundcloud图表。我使用标志类型做了它，并将每个数据项的形状变量设置为用户图片url。如何在高图表标志中设置风格图像？

但我想为每个图标添加彩色边框。我知道，标记类型中有lineWidth和lineColor配置，但它不适用于图像，它只适用于默认形状flag，circlepin或squarepin。

我试图使用形状为flag并添加用户图像作为背景图像，但它不起作用。

来源

2015-10-19 gokmen

你必须让你的HTML至少.. – makshh

你可以试着抓住负载/重绘图表事件，然后使用渲染器添加自定义图像。（http://api.highcharts.com/highcharts#Renderer.image） –

在SVG不能为图像中设置边界，你需要创建图像周围的矩形：http://jsfiddle.net/xuL76rkL/1/

例如，你可以使用load和redraw事件来管理这些rects，代码：

var H = Highcharts; 
function drawBorder() { 
    var chart = this; 

    H.each(chart.series[1].points, function(p) { 
     var bbox, 
      rect, 
      fontSize = 13, // it's used as default font size offet, even for the images 
      dim = 32; //width and height for the image 
     if(p.graphic) { 
      if(p.rectangle) { 
       p.rectangle.destroy(); 
      } 
      bbox = p.graphic.getBBox(); 
      rect = chart.renderer.rect(p.plotX - dim/2, p.plotY - dim/2 - fontSize, dim, dim).attr({ 
       "stroke": "black", 
       "stroke-width": 2, 
       "fill": "transparent" 
      }).add(chart.series[1].markerGroup); 
      p.rectangle = rect; 
     } 
    }); 
} 


$('#container').highcharts('StockChart', { 

    chart: { 
     events: { 
      load: drawBorder, 
      redraw: drawBorder 
     } 
    }, 
    ... 
});

来源

2015-10-20 11:03:17

如何在高图表标志中设置风格图像？

回答

相关问题