javascript - Highcharts clickable column to open another page on same site - Stack Overflow

admin管理员组

文章数量:1426594

I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.

How would I made a column clickable to say google

The code I have is:

$(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
});
});

});
});

Many thanks in advance for your time.

I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.

How would I made a column clickable to say google.

The code I have is:

$(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
});
});

});
});

Many thanks in advance for your time.

• javascript
• jquery
• iframe
• highcharts

Share Improve this question Follow edited Mar 26, 2016 at 17:14 Nikolay Fominyh 9,25699 gold badges7272 silver badges103103 bronze badges asked Mar 26, 2016 at 16:22 DCJonesDCJones 3,48155 gold badges3838 silver badges6363 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is explained: http://api.highcharts./highcharts#plotOptions.series.point.events.click

You could acplish this with custom url in each bar:

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

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

working fiddle: http://jsfiddle/gh/get/jquery/1.7.2/highslide-software/highcharts./tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

or all the same URL:

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

Hope it helps!

UPDATE

If is in a frame, you could try using:

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

"_top" loads content in the top-level frameset (in effect, the whole browser window), no matter how many nested levels down the current frame is located

本文标签： javascriptHighcharts clickable column to open another page on same siteStack Overflow