如何在高圖表標誌中設置風格圖像？

在我的圖表中，我顯示用戶圖片的評論日期，以便用戶可以使用這些圖標閱讀工具提示中的評論。它看起來像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

如何在高圖表標誌中設置風格圖像？

回答

相關問題