繪製自定義背景造型工具提示中highcharts

我被要求做一個項目我正在使用highcharts/stackcharts的。我們的藝術家設計了與我們正在使用的其他組件相匹配的外觀和感覺。我需要改變導航器上工具提示和手柄的形狀和大小。基本上我需要將圖表剝皮。繪製自定義背景造型工具提示中highcharts

我不能在這個階段使用另一個圖表庫，因爲我們已經承諾highchars但如果這是不可能的，那麼這將是我們的一個大忌。

的Stackcharts文檔狀態這一點：

句柄：對象的句柄拖動縮放區域選項。可用選項是backgroundColor和borderColor。

這是不夠好:(

我也試着畫一個自定義的工具提示使用此代碼：

 tooltip: { 
      useHTML: true, 
      formatter: function() { 
       var st = '<div style="background-color:#ff8000"><svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="#ffdd55" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn></div>'; 
       return st; 
      } 
     }

http://jsfiddle.net/pdDk4/

但SVG被捲入邊界，這是沒有按」 t看起來像我可以取代它沒有黑客:(

我不想那樣做。

我調查了幾個小時沒有任何成功的護目鏡。有沒有人知道我能做到這一點？

請先生，我可以morrr定製？

來源

2013-04-08 anber

在情況下，當你設置useHTML爲真，那麼你可以設置在CSS背景。

http://jsfiddle.net/pdDk4/5/

formatter: function() { 
       var st = '<div class="tooltip">'+this.y+'</div>'; 
       return st; 
      }

CSS：

.tooltip { 
    width:200px; 
    height:200px; 
    background:url('http://aeseda.psu.edu/wp-content/themes/theme-mingle/assets/images/placeholder.jpg'); 
}

我建議以這種方式不使用SVG，因爲在IE < 8提示將不會出現，因爲舊的browseres使用VML。

來源

2013-04-08 13:06:35

感謝您的答覆。你的解決方案並不能讓我變得比我已經擁有的更多。我可以輕鬆地將背景圖像添加到我擁有的div，但有一個原因需要SVG，而不僅僅是背景的位圖。我使用raphaeljs繪製SVG路徑，所以在IE中，路徑將被繪製爲VML。 – anber 2013-04-22 06:07:37

指出的重要一點是，我需要繪製自定義形狀作爲背景。正確的解決方案是使用像raphaeljs或類似的東西繪製自定義形狀。

爲了簡單起見，我已經更新了小提琴以反映溶液I後。這與我的原始代碼沒有太大的區別，但是當第一次提問時我一定會陶醉。這裏是更新小提琴：

http://jsfiddle.net/pdDk4/

有了這個，你可以繪製自定義形狀作爲背景，你的提示。請記住，這在IE8中不起作用，但您可以使用raphaeljs之類的東西將SVG形狀轉換爲VML。

formatter: function() { 
    var st = '<svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="rgba(255, 150, 0, 0.8)" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn><div style="position:absolute;left:10px;top:10px">this.y =' + this.y + '<div>'; 
    return st; 
    }

來源

2013-04-22 06:29:14 anber

繪製自定義背景造型工具提示中highcharts

回答

相關問題