Highchart加載時間後,系列添加進圖表,使用 addSeries 方法,this 關鍵詞表示圖表項目自己。一個參數,時間,傳遞功能。這包含基於jQuery或 MooTools,這取決於你選取的基本Highgcharts圖表庫。經過event.options,你能夠操做經過addSeries方式傳遞的系列選項,返回 false ,防止系列被添加。css
$(function () { // create the chart $('#container').highcharts({ chart: { events: { click: function(event) { var label = this.renderer.label( 'x: '+ Highcharts.numberFormat(event.xAxis[0].value, 2) +', y: '+ Highcharts.numberFormat(event.yAxis[0].value, 2), event.xAxis[0].axis.toPixels(event.xAxis[0].value), event.yAxis[0].axis.toPixels(event.yAxis[0].value) ) .attr({ fill: Highcharts.getOptions().colors[0], padding: 10, r: 5, zIndex: 8 }) .css({ color: '#FFFFFF' }) .add(); setTimeout(function () { label.fadeOut(); }, 1000); } } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); });
效果圖:web
繪製背景的時候出現。this 關鍵詞表示圖表項目自己。一個參數,時間,傳遞功能。這包含基於jQuery或 MooTools,這取決於你選取的基本Highgcharts圖表庫。數組
繪製點擊信息能夠經過 event.xAxis 和 event.yAxis找到,這些都是包含維度軸的數組,每個軸值都點上。主要軸時event.xAxis[0] 和 event.yAxis[0],記住,自970-01-01 00:00:00,數據時間軸的單位是毫秒。this
click: function(e) { console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), e.yAxis[0].value ) }
試一試:code
代碼1:orm
$(function () { // create the chart $('#container').highcharts({ chart: { events: { addSeries: function() { var label = this.renderer.label('A series was added, about to redraw chart', 100, 120) .attr({ fill: Highcharts.getOptions().colors[0], padding: 10, r: 5, zIndex: 8 }) .css({ color: '#FFFFFF' }) .add(); setTimeout(function () { label.fadeOut(); }, 1000); } } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); // activate the button $('#button').click(function() { var chart = $('#container').highcharts(); chart.addSeries({ data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] }); $(this).attr('disabled', true); }); });
效果圖1:教程
點擊Add Series,獲得下圖:get