Javascript 为highcharts中的工具提示绘制自定义背景形状

我被要求在我正在进行的项目中使用highcharts/stackcharts。我们的艺术家设计的外观和感觉与我们正在使用的其他组件相匹配。我需要更改导航器上工具提示和控制柄的形状和大小。基本上我需要把图表剥皮

我不能在这个阶段使用另一个图表库，因为我们已经承诺使用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;
            }
        }

工具提示：{
是的，
格式化程序：函数（）{
var st=''；
返回st；
}
}

但是svg被拉进了边界，我似乎无法在不修改它的情况下替换它：（

我不想那样做

我已经调查了好几个小时，但都没有成功。有人知道我是如何做到这一点的吗

---

请问，先生，我可以做一些定制吗？

如果您将useHTML设置为true，那么您可以在CSS中设置背景

---

我建议不要以这种方式使用SVG，因为在IE中需要指出的重要一点是，我需要绘制一个自定义形状作为背景。正确的解决方案是使用raphaeljs或类似的东西来绘制自定义形状

为了简单起见，我更新了fiddle以反映我所追求的解决方案。它与我的原始代码没有太大区别，但当我第一次问这个问题时，我一定是喝醉了。以下是更新fiddle：

有了它，你可以在工具提示中绘制自定义形状作为背景。记住，这在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;
  }

格式化程序：函数（）{
var st='this.y='+this.y+'；
返回st；
}

感谢您的回复。您的解决方案并没有给我带来比我已有的更好的效果。我可以轻松地将背景图像添加到我拥有的div中，但我需要SVG而不仅仅是背景位图是有原因的。我正在使用raphaeljs绘制SVG路径，因此在IE中，路径将被绘制为VML。

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

 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;
  }