Highcharts - 讓點點擊？

我已經搜索並測試了幾種解決方案，但它真的很難找到一個答案，這個看似簡單的問題：Highcharts - 讓點點擊？

 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], 
      url: [http://test.com/, http://test2.com/]

這個圖表可以點擊點到目前爲止，我只設法使x軸上的值可點擊（通過將它們添加爲簡單的html a href代碼）

但是我無法使圖表上的點可點擊嗎？

這是一個容易的問題，但我找不到答案，高層建築師的AJAX示例似乎被竊聽。

任何人都可以幫我嗎？

來源

2014-01-07 user3010273

，使圖表上點擊點設置allowPointSelect爲真

plotOptions:{ 
    series:{ 
    allowPointSelect: true 
    } 
}

現在你處理來自

plotOptions:{ 
    series:{ 
    point:{ 
     events:{ 
     select: function(e){ 
      //your logic here 
     } 
     } 
    } 
    } 
}

單擊事件或選擇事件我已經更新了你在這裏提琴http://jsfiddle.net/a6yL8/1/

API參考鏈接：http://api.highcharts.com/highstock#plotOptions.series.point.events

我希望這會幫助你

來源

2014-01-07 05:55:14 Strikers

我只想點可點擊，而不是線。 – vikyd

這將使點可點擊，但不是線。在答案中檢查API參考。 – Strikers

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JQuery的

$(function() { 
    $('#container').highcharts({ 
     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' 
     }, 
     plotOptions: { 
      series: { 
        marker: { 
         enabled: true, 
         symbol: 'circle', 
         radius: 1, 
         states: { 
          hover: { 
           enabled: true 
          } 
         } 
       },  
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          alert('okk'); 
          } 
         } 
        } 
       } 

     }, 
     legend: { 
      type: 'area', 
      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] 
     }] 
    }); 
});

，請點擊這裏jsfiddle

來源

2014-01-07 05:24:59

這不是一個可點擊的圖表 - 你確定你粘貼了你的意思嗎？ – user3010273

@ user3010273我有更新的答案，現在檢查小提琴和代碼 –

正確的答案。接受的答案不適合我。謝謝。 – waterkinq

https://stackoverflow.com/a/20964524很好。

但是，

默認情況下，點擊線，而不是點也同樣會觸發點擊事件，只允許點擊點：plotOptions.series.point.events.click

click: function (e) { 
    let $target = $(e.target) 
    if (!$('<b></b>').addClass($target.attr('class')).is('.highcharts-point, .highcharts-halo')) { 
     return 
    } 
    // do your work below ↓ 
}

http://jsfiddle.net/M5E5r/42/

來源

2017-09-19 07:30:06 vikyd

Highcharts - 讓點點擊？

回答

相關問題