0

ツールチップのデフォルトのスタイルを変更しようとしています。吹き出しボックスのように、とがった角のある 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);
};

}(ハイチャート));

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

});

4

1 に答える 1

0

すべての hgihcharts オプションを無効にし、useHTML を設定し、すべての要素を CSS スタイルの HTMl elemtns として追加することをお勧めします。

于 2013-11-14T11:27:14.640 に答える