在圖表中添加一個超鏈接到stockChart

Question

我正在尋找將超鏈接添加到股票圖表的選項。以便用戶可以單擊圖表上的任何位置並重定向到另一個頁面。

沒有在系列中，我想在圖表上添加超鏈接。

Answer 1

您需要調用你的高圖容器div的函數。你可以使用下面的函數。

$("#container").on("click", function(){ 
window.open('http://google.com', '_blank'); 
// You can also use if not cross domain request 
//window.location.href='http://google.com'; 

}); 

參考this fiddle link for example

Answer 2

只要讓你的渲染元素的<a>元素與href屬性指向要在其中採取用戶（就像任何其他的超鏈接）。只要確保這個<a>元素有一個display屬性設置爲塊：

$(function() { 
 
    Highcharts.chart('container', { 
 
     title: { 
 
      text: 'Monthly Average Temperature', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: 'Source: WorldClimate.com', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Temperature (°C)' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: '°C' 
 
     }, 
 
     legend: { 
 
      layout: 'vertical', 
 
      align: 'right', 
 
      verticalAlign: 'middle', 
 
      borderWidth: 0 
 
     }, 
 
     series: [{ 
 
      name: 'Tokyo', 
 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
 
     }, { 
 
      name: 'New York', 
 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
 
     }, { 
 
      name: 'Berlin', 
 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
 
     }, { 
 
      name: 'London', 
 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
 
     }] 
 
    }); 
 
});

#container { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<a href="http://example.com" id="container" style="height: 200px"></a>

注意，在這個例子中我使用Highcharts自己的Basic Line Chart演示。