堆积条形图中每个框的URL

Question

我想创建一个堆积条形图，如下面的网址

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

我想为每个红色，紫色和蓝色框创建超链接。图表可以使用jfree图表，但我不知道如何将每个单独的条形成为URL，以便点击它可以刷新这页纸。 用jfree图表可以做到吗？

在这种情况下，Jquery是否有帮助使每个网址都启用？请建议。

Answer 1

使用jfreechart，您可以使用更适合您需求的两种实现中的任何一种将CategoryURLGenerator应用于绘图。相关PieURLGenerator概述了here的方法。 ChartFactory.createStackedBarChart()使用StackedBarRenderer并允许PlotOrientation.HORIZONTAL。

附录：要为单个项目生成网址，您可以检查ChartEntity中返回的ChartMouseListener，如图所示here。

Answer 2

我知道你可以在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函数。