笑的自然

Members
  • Content count

    2
  • Joined

  • Last visited

Posts 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>