Question

您好我想知道如何在highcharts中创建一个链接，以便它可以与bootstrap的popover功能一起使用。这是一个小提琴

$(function () {
         $('#container').highcharts({
             chart: {},
             title: {
                 text: 'Sales Funnel ' + '<a style="font-size:12px" id="popoverFunnel" data-toggle="popover" title="hello" data-content="hellooo">Hello</a>' 
             },
             xAxis: {
                 minPadding: 0.05,
                 maxPadding: 0.05
             },

             series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }],


             plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
         });
     });

    $('document').ready(function () {
        $('#popoverFunnel').popover();
    });

谢谢詹姆斯

Answer 1

设置title.useHTML = true，请参阅：http://jsfiddle.net/287JP/5/

     $('#container').highcharts({
         title: {
             useHTML: true,
             text: 'Sales Funnel ' + '<a style="font-size:12px" id="popoverFunnel" data-toggle="popover" title="hello" data-content="hellooo">Hello</a>' 
         },
         ...
     });

Answer 2

我举了你的例子并使它与Bootstrap一起工作。请参阅http://jsfiddle.net/key2xanadu/zfsfz0c9/。

解决方案涉及ID标记小狗，然后在底部对它们进行加工：

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

示例还说明了如何向x轴标签添加工具提示！

在highcharts中制作标题可点击并使用bootstrap popover？

2 个答案: