1

我想创建一个堆叠条形图，如下面的 url

图片
（来源：jpowered.com）

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

在这种情况下，Jquery plot 是否有助于启用每个框 url？请提出建议。

4

2 回答 2

2

使用，您可以CategoryURLGenerator使用更适合您需要的两种实现中的任何一种将 a 应用于绘图。此处为相关的PieURLGenerator. ChartFactory.createStackedBarChart()使用 aStackedBarRenderer并允许PlotOrientation.HORIZONTAL.

附录：要为单个项目生成 URL，您可以检查 a 中的ChartEntity返回值，如此处ChartMouseListener所示。

于 2012-04-26T03:12:46.843 回答
1

我知道你可以在 jqPlot 中毫不费力地实现这样的目标。创建绘图后，您需要记住的唯一想法是将函数绑定到jqplotDataClick事件。在您的函数中，您需要将点击映射到 url 结构。我在一个示例示例中对此进行了介绍，其中只有第一个系列的栏将您带到一些网站。示例在 jsfiddle 上——可以在这里找到。

实际上，一切都归结为这段代码：

  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-25T14:52:00.770 回答