Question

我尝试修改工具提示的默认样式。我希望tooptip的底部有一个尖角，就像标注框一样。我找到了一个支持右侧和左侧指针的示例。我修改了一些代码，在底部实现指针，但是指针不能指向选定的点。在jsFiddle的代码链接：http://jsfiddle.net/yuezheng/AxqKY/90/。如何将盒子放在所选点的顶部？

(function (Highcharts) {
Highcharts.Renderer.prototype.symbols.callout = function (x, y, w, h, options) {
    var distance = 15,
        arrowLength = 10,
        halfDistance = 7.5,
        r = options ? options.r : 5,
        anchorX = (options && options.anchorX) || x,
        anchorY = (options &&  options.anchorY) || y,
        top = ['M', x + r, y, 'L', x + w - r, y],
        topRight = ['C', x + w, y, x + w, y, x + w, y + r],
        right = ['L', x + w, y + h - r],
        rightBottom = ['C', x + w, y + h, x + w, y + h, x + w - r, y + h],
        //bottom = ['L', x + r, y + h],
        bottomLeft = ['C', x, y + h, x, y + h, x, y + h - r], 
        left = ['L', x, y + r],
        leftTop = ['C', x, y, x, y, x + r, y],
        bottom = ['L', x + w/2 + arrowLength, y + h,
                   x + w/2, y + h + arrowLength,
                   x + w/2 - arrowLength, y + h,
                   x, y + h];

    /*
    if (anchorX > w) {
        right = [
            'L', x + w, anchorY - halfDistance, 
            x + w + arrowLength, anchorY,
            x + w, anchorY + halfDistance,
            x + w, y + h - r
        ];
    } else if (anchorX < 0) {
        left = [
            'L', x, anchorY + halfDistance, 
            x - arrowLength, anchorY,
            x, anchorY - halfDistance,
            x, y + r
        ];
    }
    */
    return top
        .concat(topRight)
        .concat(right)
        .concat(rightBottom)
        .concat(bottom)
        .concat(bottomLeft)
        .concat(left)
        .concat(leftTop);
};

}（Highcharts））;

var chart = new Highcharts.Chart（{

chart: {
    renderTo: 'container',
    type: 'line'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

tooltip: {
    shape: 'callout',
    borderColor: '#AAA',
    borderWidth: 1,
    shadow: false,
    borderRadius: 5
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

}）;

Answer 1

也许更好的是禁用所有hgihcharts选项，设置useHTML并将所有元素添加为HTMl elemtns与CSS样式？

如何定位HighCharts的自定义工具提示？

1 个答案: