笑的自然

Members
  • Content count

    2
  • Joined

  • Last visited

Everything posted by 笑的自然

  1. <!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> <link rel='stylesheet' href="Contents/Style.css" /> </head> <body onload="addversion();"> <div id="details"> </div> <div id="pastdetails"> </div> <div id="mapContainer" align="center" style="background-color:#5882a8;padding:80px;"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script language="JavaScript" src="Charts/FusionCharts.js"></script> <script language="JavaScript" src="PowerMap.js"></script> <script language="JavaScript" src="release-v.js"></script> <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> <script type="text/javascript"> var map = new FusionCharts("Maps/FCMap_World.swf", "myMapId", "880", "400", "0", "1"); //map.setDataURL("Data/Maps/RegionWiseSales_zh.xml"); map.setJSONData({ "map": { "animation":"1", "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" }, "data": [ {"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'}, {"id": "AF", "value": "881215"}, {"id": "AU", "value": "321231"} ] }); map.render("mapContainer"); function myChartListener1(eventObject, argumentsObject){ $("#details").html( "You are over entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value ); } FusionCharts("myMapId").addEventListener ("EntityRollover" , myChartListener1 ); function myChartListener2(eventObject, argumentsObject){ $("#pastdetails").text( "You are out of entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value ); } FusionCharts("myMapId").addEventListener ("EntityRollout" , myChartListener2 ); </script> <div id='content'>Please roll over an entity to see details.</div> <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>
  2. 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>