2016-11-24 6 views
1

Я ищу варианты добавления гиперссылки на диаграмму акций. Чтобы пользователь мог щелкнуть в любом месте диаграммы и перенаправить на другую страницу.Добавить гиперссылку на stockChart в highcharts

Не в серии, я бы хотел добавить гиперссылку на диаграмму.

ответ

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

0

Просто сделайте ваш рендеринг элемент <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>

Обратите внимание, что для этого примера я использовал собственную Basic Line Chart демо Highcharts.

Смежные вопросы