1

以下のURLのように積み上げ棒グラフを作成したい

画像
（出典：jpowered.com）

赤、紫、青の各ボックスにハイパーリンクを作成したい。グラフはjfreeチャートで可能ですが、クリックしてページを更新できるように、個々のバーをURLとして作成する方法がわかりません。jfreeチャートでそれを行うことは可能ですか？

この場合、Jqueryプロットは、各ボックスのURLを有効にするのに役立ちますか？提案してください。

4

2 に答える 2

2

を使用CategoryURLGeneratorすると、2つの実装のどちらかがニーズに適しているものを使用して、プロットにを適用できます。ここでは、関連するアプローチの概要を説明しますPieURLGenerator。ChartFactory.createStackedBarChart()を使用し、StackedBarRendererを許可しますPlotOrientation.HORIZONTAL。

補遺：個々のアイテムのURLを生成するには、ここに示すように、でChartEntity返されたものを調べることができます。ChartMouseListener

于 2012-04-26T03:12:46.843 に答える
1

jqPlotでこのようなことを問題なく達成できることを私は知っています。プロットを作成した後、覚えておく必要があるのは、関数をjqplotDataClickイベントにバインドすることだけです。関数では、クリックをURLの構造にマッピングする必要があります。これをサンプル例で示しました。最初のシリーズのバーだけがいくつかのWebサイトに移動します。サンプルは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 に答える