Highcharts clickable column在同一網站上打開另一頁

我正在製作一個生成圖表的腳本（Highcharts）。這項工作很好，但我想添加一個「點擊」功能，點擊後在同一個網站上打開另一個scropt。閱讀了關於可點擊的列後，我不知道如何使其工作。Highcharts clickable column在同一網站上打開另一頁

我將如何做一個欄點擊說google.com

我的代碼是：

$(function() { 

var categories=[]; 
var data2 =[]; 


var chart; 
$(document).ready(function() { 

$.getJSON("../charts/imaint_audit_water_temp_cold_chart.php", function(json) { 
    $.each(json,function(i,el) { 
    if (el.name=="Count") 
     categories = el.data; 
    else data2.push(el); 
}); 

$('#container1').highcharts({ 
chart: { 
    renderTo: 'container', 
    type: 'column', 
    marginTop: 40, 
    marginRight: 30, 
    marginBottom: 50, 
    plotBackgroundColor: '#FCFFC5' 
}, 

title: { 
    text: 'Failed cold water temperatures', 
    x: -20, //center 
    style: { 
     fontFamily: 'Tahoma', 
     color: '#000000', 
     fontWeight: 'bold', 
     fontSize: '10px' 
    } 
}, 

subtitle: { 
    text: '', 
    x: -20 
}, 
xAxis: { 
    labels: { 
     enabled: false 
    } 
}, 

yAxis: { 
    showFirstLabel: false, 
    lineColor:'#999', 
    lineWidth:1, 
    tickColor:'#666', 
    tickWidth:1, 
    tickLength:2, 
    tickInterval: 10, 
    gridLineColor:'#ddd', 

    title: { 
     text: '', 
     style: { 
     fontFamily: 'Tahoma', 
     color: '#000000', 
     fontWeight: 'bold', 
     fontSize: '10px' 
     } 
    }, 

plotLines: [{ 
    color: '#808080' 
}] 
}, 

legend: { 
    enabled: true, 
    itemStyle: { 
     font: '11px Trebuchet MS, Verdana, sans-serif', 
     color: '#000000' 
    }, 
    itemHoverStyle: { 
     color: '#000000' 
    }, 
    itemHiddenStyle: { 
     color: '#444' 
    } 
}, 


colors: [ 
    '#0066CC', 
    '#FF2F2F', 
], 

plotOptions: { 
    series: { 
     point: { 
     events: { 
      click: function() { 

      } 
     } 
    } 
}, 
legendIndex:0, 

dataLabels: { 
enabled: true, 
color: '#000000', 
align: 'center', 
cursor: 'pointer', 
y: 0, // 10 pixels down from the top 
style: { 
    fontSize: '10px', 
    fontFamily: 'Verdana, sans-serif' 
} 
} 
} 
}, 

credits: { 
    enabled: false 
}, 

series: data2 
}); 
}); 

}); 
});

提前爲您的時間非常感謝。

來源

2016-03-26 DCJones

這裏解釋：http://api.highcharts.com/highcharts#plotOptions.series.point.events.click

你可以在每個欄自定義URL做到這一點：

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

     series: [{ 
      data: [{ 
       y: 29.9, 
       url: 'http://bing.com/search?q=foo' 
      }, { 
       y: 71.5, 
       url: 'http://bing.com/search?q=bar' 
      }, { 
       y: 106.4, 
       url: 'http://bing.com/search?q=foo+bar' 
      }] 
     }]

工作小提琴：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

或全部相同網址：

point: { 
        events: { 
         click: function() { 
          location.href = "http://stackoverflow.com"; 
         } 
        } 
       }

希望它有幫助！

UPDATE

如果是在一個框架，你可以嘗試使用：

window.top.location.href='URLGoesHere';

在頂層框架

「_top」負荷量（實際上，整個瀏覽器窗口），無論多少嵌套級別下降，當前框架位於

來源

2016-03-26 16:47:57

嗨JP，非常感謝這樣一個脂肪的答覆。它工作正常。唯一的我是圖表是在一個iFrame中，因此頁面加載在iFrame中。我需要做什麼來加載父母的網址。再次非常感謝你的時間。 – DCJones

不客氣。看到我的更新，它可以幫助你！ –

JP，完美。非常感謝。 – DCJones

Highcharts clickable column在同一網站上打開另一頁

回答

相關問題