Question

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

我不能在这个阶段使用另一个图表库，因为我们已经致力于高级人员，但如果这是不可能的话，那么这对我们来说是一个交易破坏者。

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被吸引到了边境，而且看起来我不能在没有黑客攻击的情况下取代它:(

我不想这样做。

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

请主席先生，我可以进行一些定制吗？

Answer 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＆lt; 8中不会出现工具提示，因为较旧的浏览器使用VML。

Answer 2

需要指出的重要一点是，我需要绘制自定义形状作为背景。正确的解决方案是使用像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;
  }

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

2 个答案: