点击时显示弹出窗口

Question

我正在使用 Fusion Chart，希望能在点击柱状图时显示弹出窗口，请帮忙。我使用 JSON 方法生成图表。以下是 HTML 代码：

<div id="chartContainerscoreConfidence" class="testseries-report-charts">
</div>

这里是 JSON 代码：

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        "type": "StackedColumn2DLine",
        "renderAt": "chartContainerscoreConfidence",
        "width": "100%",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Time Taken",
                "bgcolor": "FFFFFF",
                "plotgradientcolor": "",
                "showalternatehgridcolor": "0",
                "showplotborder": "0",
                "divlinecolor": "CCCCCC",
                "showvalues": "0",
                "showcanvasborder": "0",
                "pyaxisname": "Question No",
                "syaxisname": "Time Taken (in minutes)",
                "numberprefix": "",
                "labeldisplay": "STAGGER",
                "slantlabels": "1",
                "canvasborderalpha": "0",
                "legendshadow": "0",
                "legendborderalpha": "0",
                "showborder": "0"
            },
            "categories": [
        {
            "category": [
                {
                    "label": "1"

                },
                {
                    "label": "2"

                },
                {
                    "label": "3"
                },
                {
                    "label": "4"
                },
                {
                    "label": "5"
                },
                {
                    "label": "6"
                },
                {
                    "label": "7"
                },
                {
                    "label": "8"
                }
            ]
        }
    ],
            "dataset": [
        {
            "seriesname": "Time taken by you",
            "color": "008ee4",
            "data": [
                {
                    "value": "3",
                    "link": " "
                },
                {
                    "value": "4"
                },
                {
                    "value": "1"
                },
                {
                    "value": "2"
                },
                {
                    "value": "1"
                },
                {
                    "value": "3"
                },
                {
                    "value": "4"
                },
                {
                    "value": "3"
                }
            ]
        },
        {
            "seriesname": "time taken by average student",
            "parentyaxis": "S",
            "renderas": "Line",
            "color": "f8bd19",
            "data": [
                {
                    "value": "1"
                },
                {
                    "value": "2"
                },
                {
                    "value": "4"
                },
                {
                    "value": "3"
                },
                {
                    "value": "2"
                },
                {
                    "value": "3"
                },
                {
                    "value": "3"
                },
                {
                    "value": "4"
                }
            ]
        }
    ]
        }
    });
    revenueChart.render();
})

我可以重定向到任何URL，但无法使用jQuery打开弹出窗口。

JS Fiddle： http://jsfiddle.net/y3H2G/226/

- ashi

---

请帮帮我，我卡在这个问题上了。 - ashi

Answer 1

有很多插件可供选择。如果您使用Bootstrap，可以使用Bootstrap的模态对话框，或者您可以使用bpopup jquery plugin，这里提供一个演示（我已经更新了您的js fiddle）：http://jsfiddle.net/y3H2G/227/

代码：

<!-- Simple implementation of the Bar 2D chart -->
<div id="chartContainerscoreConfidence" class="testseries-report-charts">
</div>
<input type="button" id="btn" value="Show popup" name="btn" onclick="$('#chartContainerscoreConfidence').bPopup();" />

- AiApaec

---

谢谢，但我想要在单击任何条形图上弹出而不是任何按钮 :( - ashi

Answer 2

终于在付出很多努力后找到了解决方案，我已经在所有条形图中添加了一个类并在单击任何条形图时调用了一个点击事件。

$(window).load(function () {


           //$('#raphael-paper-149').addClass('hhhhhhhhhhhhhhhhhhhhhhhhhhhh');
           $("#raphael-paper-149 g").attr("class", "clickbleClass");
           $('.clickbleClass').click(function(){
            alert('hi');
           });
        });

- ashi