Click Event in the FusionChart chart control (processing method when XML and JSON are used as data sources respectively) and fusionchartjson
1. When JSON is used as the Data source:
@{
Layout = null;
}
<! DOCTYPE html>
<Html>
<Head>
<Meta name = "viewport" content = "width = device-width"/>
<Title> InChart </title>
<Script src = "~ /Scripts/jquery-1.8.2.min.js "> </script>
<Script src = "~ /Scripts/FusionChartsV3.2/FusionCharts. js "> </script>
</Head>
<Body>
<Div>
<Div id = "chartdiv" align = "center"> </div>
<Script type = "text/javascript">
Var MyChart = new FusionCharts ("../Scripts/FusionChartsV3.2/Bar2D.swf", "MyChart1", "1200", "600 ");
MyChart. setJSONData ({
"Chart ":{
"Caption": "My Test Caption ",
"Subcaption ":"",
"Yaxisname": "Quantity ",
"Xaxisname": "Packing Box number ",
"Alternatevgridcolor": "AFD8F8 ",
"Basefontcolor": "114B78 ",
// "Tooltipbordercolor": "114B78 ",
// "Tooltipbgcolor": "E7EFF6 ",
"Useroundedges": "1 ",
"Showborder": "1 ",
"Bgcolor": "FFFFFF ",
"Numbersuffix": "M ",
// "Palettecolors": "# AFD8F8, # F6BD0F, #8BBA00, # A66EDD, # F984A1"
"Palettecolors": "#8BBA00 ",
"BaseFontSize": "15 ",
"AlternateVGridColor": "99FF00"
},
"Data ":[
{
"Label": "Orange ",
"Value": "23 ",
"Link": "j-ClickAction-23"
},
{
"Label": "Apple ",
"Value": "12 ",
"Link": "j-ClickAction-12"
},
{
"Label": "Banana ",
"Value": "17 ",
"Link": "j-ClickAction-17"
},
{
"Label": "Mango ",
"Value": "14 ",
"Link": "j-ClickAction-14"
},
{
"Label": "Litchi ",
"Value": "12 ",
"Link": "j-ClickAction-12"
}
]
});
MyChart. render ("chartdiv ");
Function ClickAction (myVar ){
Window. alert (myVar );
}
</Script>
</Div>
</Body>
</Html>
2. When XML is used as the Data source:
When spelling the xml file used to load the chartLabel = "Orange"Value = "23"> AddLink = 'J-ClickAction-23 ', that is, <setlabel = "Orange" value = "23" link = 'J-ClickAction-23'>;
**************************************** **************************************** **************************************** **************************************** *****************
Explanation:
Among them, j indicates that js is called, ClickAction indicates the name of the js method to be called on your front-end page, and 23 indicates the parameters required by the front-end js method ClickAction.
Effect