点击弹出窗口

时间:2015-04-20 15:42:43

标签: html json fusion

我正在使用融合图表想要显示弹出点击融合条形图的条形图请帮助我我使用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();
})

我可以重定向任何网址,但无法使用jquery

打开弹出窗口

小提琴: http://jsfiddle.net/y3H2G/226/

2 个答案:

答案 0 :(得分:0)

有许多插件。如果你使用bootstrap你可以使用boostrap&#39;模态对话框或您可以使用bpopup jquery plugin,这里是一个演示(我已经更新了您的js小提琴):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();" />

答案 1 :(得分:0)

的Wooo 经过多方努力后得到了解决方案 我在所有栏中添加了一个类,并在点击任何栏上时调用点击事件

$(window).load(function () {


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