2016-03-26 1 views
3

私はグラフを作成するスクリプト(Highcharts)を作成しています。これはうまく動作しますが、クリックしたときに同じサイトで別のscroptを開く「クリック」機能を追加したいと思います。クリック可能な列について読んだ後、私はそれを動作させる方法がわかりません。私が言って、列クリッカブルを作っただろうかハイチャートは、同じサイトの別のページを開くためのクリック可能な列です。

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

}); 
}); 

感謝します。ここで

答えて

2

が説明されている: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/

または全て同じURL:

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

希望すると助かります!

UPDATE

フレーム内にある場合は、使用して試みることができる:

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

(実際には、全体 ブラウザウィンドウ)トップレベルのフレームセットの内容 "_top" ロードどんなに多くのネストされたレベルが現れても、現在の フレームが配置されていても、

+0

こんにちは。それはうまく動作します。私が持っている唯一のisseは、iFrameにチャートがあるので、ページがiFrameにロードされることです。親にURLをロードするには何が必要ですか。もう一度多くのお時間をありがとう。 – DCJones

+0

ようこそ。私の更新を見て、それはあなたを助けることができます! –

+0

JP、完璧です。もう一度ありがとう。 – DCJones

関連する問題