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在同一网站上打开另一页

回答

相关问题