图表ZingChart

最新推荐文章于 2024-04-20 00:59:12 发布

dragonzoebai

最新推荐文章于 2024-04-20 00:59:12 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： JavaScript 图表 ZingChart

本文链接：https://blog.csdn.net/dragonzoebai/article/details/17357213

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

http://www.zingchart.com/reference/index.html

http://www.zingchart.com/reference/improving-data-indicators.html

http://www.zingchart.com/reference/object.html#zingchart__render

<html>
<head>
	<title>Hello ZingChart</title>
	<script type="text/javascript" src="zingchart-html5-min.js"></script>
	<script type="text/javascript">
	    var myChart = {
		    type   : "bar3d",  
            "3d-aspect":{  
                "true3d" : 0,  
                "y-angle": 10,  
                "depth"  : 25  
            },   
            tooltip: { text : "%t %k %v" },//%t系列，%k横轴，%v值
		    title  : {text: "Hello ZingChart World!"},
		    source : { text : "Source: Farnsworth Delivery Tracking Gizmo"},//右下角说明
		    legend : {},//图例
		    plot : { 
                       valueBox : { type:"all", placement:"top" },//标签 
                       animation:{"speed":300,"effect":8,"method":0}//效果 
                      },
		    crosshairX : {},//竖丝
		    crosshairY : {},//横丝
	        scaleX : { label : { text : "横轴" }, values : ["Mon","Tue","Wed","Thu","Fri","Sat"]},
	        scaleY : { label : { text : "竖轴" }, values : "0:20:5", markers : [ 
		                { type:"area",range:[0,5] ,backgroundColor:"#e74c3c",alpha:0.2 },
		                { type:"area",range:[5,10],backgroundColor:"#f1c40f",alpha:0.2}
	                 ]},
		    series : [
			    { text: "系列1", values:[5, 10, 15, 5, 10, 5]},
			    { text: "系列2", values:[2, 4, 6, 8, 10, 12]}
			]
	    };
	    window.οnlοad=function(){
	        zingchart.render({
		        id : "myChartDiv",
		        height : 450,
		        width : 600,
		        data : myChart,
		        fullscreen:true,
		        hideprogresslogo:true
		    });	
	    };
	</script>
</head>
<body>
    <div id="myChartDiv"></div>
</body>
</html>