笑的自然
-
Content count
2 -
Joined
-
Last visited
Posts posted by 笑的自然
-
-
When i click change it, i hope, it could change color for every entity.
test code is below...
please change js path after next code saved as html.
please tell me why? thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sales Dashboard | FusionCharts</title> <script type="text/javascript"> function FC_Event(DOMId, eventType, objParams){ if (eventType=="rollOver"){ document.getElementById("content").innerHTML = "You rolled over entity with id as " + objParams.id + " having name as " + objParams.lName + " ("+ objParams.sName + ") and value as " + objParams.value; }else{ document.getElementById("content").innerHTML = "Please roll over an entity to see details."; } } </script> </head> <body onload="addversion();"> <div id="details"> </div> <div id="pastdetails"> </div> <div id="mapContainer" align="center" style="background-color:#5882a8;padding:20px;">FusionMaps XT will load here!</div> <div id='content'>Please roll over an entity to see details.</div> <input type="button" onClick="changeIt();" value="Change It"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="Charts/FusionCharts.js"></script> <script type="text/javascript" src="Charts/FusionCharts.jQueryPlugin.js"></script> <script type="text/javascript" src="PowerMap.js"></script> <script type="text/javascript" src="release-v.js"></script> <script type="text/javascript"> $(function(){ var defalutCfg = { "animation":"0", "showlabels":"1", "showmarkerlabels":"1", "showtooltip":"1", "showbevel": "0", "showshadow": "0", "showexportdatamenuitem": "1", "showprintmenuitem": "1", "showcanvasborder": "1", "borderthickness": "1", "exportenabled": "1", "exposehoverevent": "1", "bordercolor": "005879", "fillcolor": "ffffff",//d7f4ff "basefont":"Verdana", "basefontsize": "12", "basefontcolor":"333333", "numbersuffix": "m", "includevalueinlabels": "1", "labelsepchar": ":", "legendposition":"bottom", "usehovercolor":"1", "numberprefix":"$", "thousandseparatorposition":"0", //"hovercolor": "e6eaee", "tooltipbgcolor": "ffffff", "tooltipbordercolor": "cad3db", "bgcolor":"84b1c6", "canvasbordercolor": "375277", "canvasborderalpha": "15" }; var initDataArr = [ {"id": "NA", "value": "515.1231", "displayValue":'北美: 515 M\n笑的自然测试哦', "toolText":"北美: 515 M\nxx" }, {"id": "SA", "value": "371233"}, //, "color":"FF9377" {"id": "AS", "value": "3875"}, {"id": "EU", "value": "721237"}, //,"color":'A7E9BC' , "color":'0000FF',"fontColor":"FFFFFF" {"id": "AF", "value": "881215"}, {"id": "AU", "value": "321231"} ]; var cfg = { swfUrl: "Maps/FCMap_World.swf", id: "myMapId", width: "880", height: "400", dataFormat: "json", dataSource: { "map": defalutCfg, "data": initDataArr } }; $("#mapContainer").insertFusionCharts(cfg); //console.log(cfg) $("#mapContainer").bind( "fusionchartsentityrollover", function (e, args) { $("#details").html( "You are over entity named: "+ args.label + " with value: " + args.value ); }).bind( "fusionchartsentityrollout", function (e, args) { $("#pastdetails").html( "You are out of entity named: "+ args.label + " with value: " + args.value ); }); }); function changeIt(){ var id = "NA,SA,AS,EU,AF,AU".split(",")[Math.floor(Math.random() * 6)]; setCurrent(id); } function setCurrent(id) { var color = "FFFFFF", font_color = "333333"; var actived_color = "0000FF", actived_font_color = "FFFFFF";//FF9377 //for (var i = 0; i < initDataArr.length ; i++ ) { // initDataArr[i].color = id == initDataArr[i].id ? actived_color : color; // initDataArr[i].fontColor = id == initDataArr[i].id ? actived_font_color : font_color; //} //$("#mapContainer").updateFusionCharts(cfg); var mapReference = FusionCharts.items["myMapId"]; var mapJSON = mapReference.getJSONData(); for (var i = 0; i < mapJSON.data.length ; i++ ) { mapJSON.data[i].color = (id == mapJSON.data[i].id) ? actived_color : color; mapJSON.data[i].fontcolor = (id == mapJSON.data[i].id) ? actived_font_color : font_color; } //console.log(mapJSON) //mapReference.setJSONData(mapJSON); mapReference.setChartData(mapJSON, "json"); //mapReference.render("mapContainer"); } </script> <div align="center" class="text">This dashboard was created using <a href="http://www.fusioncharts.com" target="_blank" id="fcXtVersion" >FusionCharts XT</a>, <a href="http://www.fusioncharts.com/products/suite/fusionwidgets-xt/" target="_blank" id="fwXtVersion">FusionWidgets XT</a> and <a href="http://www.fusioncharts.com/products/suite/fusionmaps/" target="_blank" id="fmXtVersion">FusionMaps XT</a></div> </body></html>
Why Event Rollover And Rollout Cannot Work In Ie9/ie8/chrome
in Bug Reports
Posted · Report reply