堆叠条形图中每个框的URL [英] URL for each box in stacked bar graph

问题描述

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

I want to create a stacked bar graph as in url below

_(来源:

_{(source: jpowered.com)}

我想为每个红色，紫色和蓝色框创建超链接.该图可以与jfree图表一起使用，但是我不知道如何将每个单独的条形制作为URL，以便单击它可以刷新这一页. 可以使用jfree图表吗?

I want to make hyperlink for each of the red ,violet and blue boxes.The graph is possible with jfree chart but i don't know how to make each of the individual bars as URL so that a click on it can refresh the page. Is it possible to do it with jfree chart?

在这种情况下，jQuery绘图是否有助于启用每个框的URL?请提出建议.

Does Jquery plot help in this case to make each box url enabled ?Please suggest.

推荐答案

我知道您可以在jqPlot中实现类似的功能而不会遇到太多麻烦. 创建绘图后，您唯一需要记住的想法是将函数绑定到jqplotDataClick事件.在您的函数中，您需要将点击映射到网址结构.我在一个示例示例中介绍了此示例，在该示例中，只有第一个系列的栏将带您进入某些网站.该示例位于jsfiddle上--- 可在此处找到.

I know that you can achieve something like this in jqPlot without much trouble. The only think you need to remember, after you create your plot, is to bind your function to jqplotDataClick event. In your function you would need to map your clicks to a structure of urls. I have presented this in a sample example, where only the first series' bars take you to some websites. The sample is on jsfiddle --- it could be found here.

有效地归结为这段代码:

Effectively all comes down to this piece of code:

  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中，例如:

I do not know an easy way, i.e. that wouldn't involve changing the script of jqPlot, of identifying the clicked bar by highlighting its background. Though I figured out a way to get a similar effect by coloring background of point labels which are on bars, the code would also need to be in the jqplotDataClicked, something like:

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函数.

You just find the clicked point label using jQuery and apply your style, e.g. changing background color, remembering the previous label so you can remove its color to previous state on click on another bar. First I tried using addClass/removeClass functions but it didn't change a label's style, thus I had to use the css function instead.

这篇关于堆叠条形图中每个框的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！