URL在堆積條形圖每箱

我想創建一個堆積條形圖在下面的網址URL在堆積條形圖每箱

image http://www.jpowered.com/php-scripts/stacked-horizontal-bar-graph/images/stacked-horizontal-bar-graph-399x402.gif

我想要的超鏈接爲每個紅色，紫色和藍色boxes.The圖形是可能的jfree圖表，但我不知道如何使每個單獨的欄作爲URL，以便點擊它可以刷新頁面。 jfree圖表可以做到嗎？

在這種情況下，Jquery plot是否有助於使每個盒子的URL都可用？請建議。

2012-04-25 jboss problem

我知道你可以在jqPlot中實現這樣的功能，而不會有太多麻煩。創建劇情後，唯一需要記住的就是將您的功能綁定到jqplotDataClick事件。在您的功能中，您需要將點擊次數映射到網址結構。我在一個示例中提出了這個例子，只有第一個系列的酒吧帶你到一些網站。樣品是的jsfiddle --- it could be found here.

有效地說來說去，這段代碼：

var urls = ["www.yahoo.com", "www.google.com", "www.java.com", "www.w3schools.com/js/js_obj_date.asp"]; 
    $('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { 
     if(seriesIndex === 0){ 
      var url = urls[pointIndex]; 
      window.open("http://"+url); 
     } 
    });

編輯

我不知道一個簡單的方法，即不會涉及改變jqPlot的腳本，通過突出顯示其背景來識別點擊的欄。雖然我想出了一個辦法由着色點的標籤，其是在酒吧的背景下獲得類似的效果，代碼也將需要在jqplotDataClicked，是這樣的：

var prevClicked; 
var prevBackgroundColor; 
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { 
    var str = ".jqplot-point-label.jqplot-series-"+seriesIndex+".jqplot-point-"+pointIndex; 
    $(str).each(function(){ 
     if(prevClicked) 
      $(prevClicked).css('background-color', prevBackgroundColor); 
     prevClicked = this; 
     prevBackgroundColor = $(prevClicked).css('background-color'); 
     $(prevClicked).css('background-color', 'red'); 
    }); 
});

你只要找到點擊點標籤使用jQuery並應用你的風格，例如更改背景顏色，記住之前的標籤，以便您可以將其顏色移至先前狀態，方法是單擊另一個欄。首先，我嘗試使用addClass/removeClass函數，但它沒有改變標籤的樣式，因此我不得不使用css函數。

來源

2012-04-25 14:52:00 Boro

我以前不熟悉這個'jqPlot'。它看起來是瀏覽器中交互式繪圖的不錯選擇。 [tag：jfreechart]支持'org.jfree.chart.imagemap'。今天早些時候+1。 – trashgod 2012-04-26 10:03:56

當你需要瀏覽器中的圖表時，'jqPlot'是個不錯的選擇。如果你還混入了一些你自己的jQuery腳本，你可以從這個庫中有效地獲得所有你想要的圖表。認爲這個庫並不像商業版本那樣精美，但是這個是免費的**，它有一個很好的（對於JavaScript標準:)文檔。 – Boro 2012-04-26 10:14:26

嗨Boro，我能夠使jqplot char.How保持單擊的顏色，以單獨的顏色突出顯示它被點擊。它顯示鼠標懸停的顏色。如何在鼠標單擊時顯示不同的顏色。我想打開一個新頁面並在頁面上顯示所點擊的條形圖數據以及該圖形。因此該數據是被點擊的部分顯示爲突出顯示的。 – 2012-05-01 20:19:58

使用jfreechart，您可以將CategoryURLGenerator應用於繪圖，使用更適合您需求的兩種實現中的任何一種。對於相關的PieURLGenerator，該方法概述爲here。 ChartFactory.createStackedBarChart()使用StackedBarRenderer並允許PlotOrientation.HORIZONTAL。

附錄：要生成單個項目的URL，您可以檢查在ChartMouseListener中返回的ChartEntity，如here所示。

來源

2012-04-26 03:12:46 trashgod

+1閱讀你的答案，它看起來在jfreechart這種事情是整齊地解決。謝謝，我之前沒有意識到這一點。一切順利，很高興見到你。 :) – Boro 2012-04-26 08:13:19

對不起，以前忽略你的問題的本質;更上面。 – trashgod 2012-04-26 10:04:59

URL在堆積條形圖每箱

回答

相關問題