0

我被要求在我正在进行的项目中使用 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;
            }
        }

http://jsfiddle.net/pdDk4/

但是 svg 被拉入了边框，我似乎无法在不修改它的情况下替换它:(

我不想那样做。

我已经调查和护目镜几个小时没有任何成功。有谁知道我怎么能做到这一点？

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

4

2 回答 2

1

如果将 useHTML 设置为 true，则可以在 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 中不会出现工具提示，因为旧版浏览器使用 VML。

于 2013-04-08T13:06:35.050 回答
0

需要指出的重要一点是，我需要绘制一个自定义形状作为背景。正确的解决方案是使用类似 raphaeljs 或类似的东西来绘制自定义形状。

为了简单起见，我更新了小提琴以反映我所追求的解决方案。它与我的原始代码并没有太大不同，但当我第一次问这个问题时，我一定是陶醉了。这是更新小提琴：

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-22T06:29:14.177 回答