在Highcharts工具提示中包含链接,并使点可点击,以便可以单击链接

时间:2016-09-26 18:23:23

标签: javascript jquery html charts highcharts

我有一个包含样条图和散点图的图表。现在,在每个散点图上,都有一个带有链接的工具提示。每当我尝试继续该链接时,工具提示就会移开。我希望单击散点图后工具提示应保留在那里,以便我可以单击链接。

$(function () {
$('#barChart').highcharts({
     chart: {
    title: {
        text: '',
        style: {
            color: '#cc0000',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        categories: [{{{timeZoneTime}}}]
    },
     yAxis: [{ /* Primary yAxis */
        labels: {
            format: '{value}%',
            style: {
                color: '#cc0000'
            }
        },
        title: {
            text: 'Failure Percentage',
            style: {
                color: '#cc0000'
            }
        }
    }, { /* Secondary yAxis */
        title: {
            text: 'Success Percentage',
            style: {
                color: '#009900'
            }
        },
        max: 100, 
        labels: {
            format: '{value} %',
            style: {
                color: '#009900'
            }
        },
        opposite: true
    }],
    labels: {
        items: [{
            html: '',
            style: {
                left: '2px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    credits: {
      enabled: false
    },
    series: [{
        type: 'column',
        name: 'Success',
        color: '#7deda2',
        yAxis: 1,
        tooltip: {
            pointFormatter: function(){
              return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barSuccess}}]
    }, 
    {
      type: 'scatter',
      name: 'incidents',
      yAxis: 1,
      data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
      tooltip: {
        pointFormatter: function(){
              return "<a href="#">" + toolTip[this.series.data.indexOf( this )] + "</a>";
            }
      }
    },
    {
        type: 'spline',
        name: 'Failure',
        tooltip: {
            pointFormatter: function(){
              return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barFailure}}],
        marker: {
            lineWidth: 3,
            lineColor: Highcharts.getOptions().colors[8],
            fillColor: 'red'
        }
    },
    {{#if lu}}
       {
        type: 'spline',
        name: 'Unknown',
        tooltip: {
            pointFormatter: function(){
              return "Unknown: " + this.y + "%" + "<br />" + "Unknown docs: " + toolTipUnknown[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barUnknown}}],
        marker: {
            lineWidth: 3,
            lineColor: 'blue',
            fillColor: '#87CEFA'
        }
    }
    {{/if}}
    ]
});

});

现在,为了在点击散点图后保持工具提示固定,stackoverflow上有一个代码。 BUt我不知道在哪里放置它以使其工作。我到处尝试但是没有用。我只想将这个功能用于散点图。这是代码。

 plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() { 
                        if (cloneToolTip)
                        {
                            chart.container.firstChild.removeChild(cloneToolTip);
                        }
                        cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                        chart.container.firstChild.appendChild(cloneToolTip);
                    }
                }
            }
        }
    },

我还想在散点图的工具提示中添加一些链接。我试过这样做,但这不起作用。

{
  type: 'scatter',
  name: 'incidents',
  yAxis: 1,
  data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
  tooltip: {
    pointFormatter: function(){
          return "<a href="#">" + toolTip[this.series.data.indexOf( this )] + "</a>";
        }
  }
},

任何人都可以帮助我吗?现在已经坚持了很久。谢谢。

0 个答案:

没有答案