笑的自然 Report post Posted March 22, 2013 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> Share this post Link to post Share on other sites
Guest Sashibhusan Report post Posted March 25, 2013 Hi, I am afraid, the "color Change functionality is working fine" using your code and FusionMaps XT V3.3.0 evaluation files, from our end. Please find the attached screen shot of the same and the sample for your reference. Could you please check the sample at your end and share your feedback? Event_colorChange.zip Share this post Link to post Share on other sites