堆叠条形图中每个框的 URL

Question

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

_{（来源：jpowered.com）}

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

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

Answer 1

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

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

Answer 2

我知道你可以在 jqPlot 中轻松实现这样的目标。 创建绘图后，您需要记住的唯一想法是将函数绑定到 jqplotDataClick 事件。在您的函数中，您需要将点击映射到 URL 结构。我在一个示例示例中对此进行了介绍，其中只有第一个系列的栏将您带到一些网站。示例在 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 函数。