dojo chart详解
Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的。 1、简介 统计图提供快速的、简单的接口实现美观的、交互性强的web统计图表的实现。 1.1 基本图表 下面的代码展示的是如何用html和dojo实现一个简单的统计图。 HTML: <divid="simplechart"style="width: 250px; height: 150px; margin: 5px auto0px auto;"></div> Javascript: require(["dojox/charting/Chart","dojox/charting/axis2d/Default","dojox/charting/plot2d/Lines","dojo/domReady!"], function(Chart, Default,Lines){ var chart1 =new Chart("simplechart"); chart1.addPlot("default", {type:"Lines"}); chart1.addAxis("x"); chart1.addAxis("y", {vertical:true}); chart1.addSeries("Series 1", [1,2,3,4,5,7]); chart1.render();
});
如上代码,创建任何一个图表都需要定义Plots,Axes和Series数据,其中,Plots是定义数据如何被显示,Axes定义的是数据显示的精度以及一些特殊的标签,Series是数据本身。 1.2 标题 有时候需要给图表添加标题,下面的代码演示的是如何给图表添加标题: require(["dojox/charting/Chart","dojo/domReady!"],function(Chart){ var chart =new dojox.charting.Chart("test", { title:"Production(Quantity)", titlePos:"bottom", titleGap:25, titleFont:"normal normal normal 15pt Arial", titleFontColor:"orange" });
});
添加标题的参数如下:
1.3 添加图表 addPlot()定义了你添加图表的类型,下面展示了一些基本的图表: 需要两个参数,一个名称和一个参数数组。名称是非常重要的如果你有多种类型的图表存在的话。参数数组包含了你要定义的图标的一些参数,包括图表的类型等。下面的代码展示了的使用: require(["dojox/charting/plot2d/Areas",...],function(Areas,...){ // ... chart.addPlot("default",{ type: Areas }); }); 1.4 2D图表 2D的图表包括以下几种:
1.4.1 Lines, AreasMarkersLines图表生成时,需要五个特别的参数。首先,有三个定义方向的参数,下面的代码展示了如何定义: require(["dojox/charting/plot2d/StackedAreas", ...], function(StackedAreas, ...){ chart.addPlot("default", { type: StackedAreas,lines:true, areas:true, markers:false }); });
此外,还有两个特殊参数,tensioninterpolate。其中,tension容许你添加一些弯曲在你的图上,默认值为“”,其他可用值包括: ·“X”– 立方贝萨尔平滑曲线。 ·“x”– 与“X”相似,但是默认数据点的集合是闭合循环的,一个班用于绘制真实的Xy值。 ·“S” – 平方贝萨尔平滑曲线。 例如: require(["dojox/charting/plot2d/StackedLines", function(StackedLines, {type: StackedLines,tension:"S" }); });
Interpolate让你选择在没有数据的情况下的操作,如果为false(默认值),则为折线图,否则会根据前后的值进行插值,平滑曲线显示。 Markers是固定大小与样式重新定义图表主题的。例如: require["dojox/charting/Chart","dojox/charting/SimpleTheme"],function(Chart, SimpleTheme){ var myTheme =new SimpleTheme({ markers: { CIRCLE:"m-6,0 c0,-8 12,m-12,8 12,0" SQUARE:"m-6,-6 12,0 0,12 -12,0z" }
});
var chart =new Chart().setTheme(myTheme); });
1.4.2 BarsColumnsCandle StickBars图表有一些特殊的参数去设置,主要有: ·gap– 柱子之间的间距 ·minBarSize– 最小值 ·maxBarSize– 最大值 require(["dojox/charting/plot2d/Bars", function(Bars, { type: Bars,gap:5, minBarSize:3, maxBarSize:20 }); });
1.4.3 Bubble Bubble提供特殊的参数去渲染,包括fill strokeshadow。例如: require(["dojox/charting/plot2d/Bubble", function(Bubble, { type: Bubble,fill:"red" }); });
1.4.4 Pie 饼状图有一些特殊的参数去设置,如下(源自Pie.js): defaultParams: { labels:true, ticks:false, fixed:true, precision:1, labelOffset:20, labelStyle:"default", // default/columns/rows/auto htmlLabels:true // use HTML to draw labels },
optionalParams: { font:"", fontColor:"", radius:0 }
1.4.5 样式控制 添加填充(fill) require(["dojox/charting/plot2d/Columns", function(Columns, { type: Columns,stroke: {color:"blue", width:2}, fill:"lightblue"}); });
添加阴影(shadow) require(["dojox/charting/plot2d/Lines", function(Lines, { type: Lines,markers:true, tension:"X", shadow: {dx:2, dy:2} }); });
过滤器(filter"dojox/gfx/filters", ...,"dojox/gfx/svgext"], function(Columns, filters,...){ chart.addPlot("default",fill:"red", filter: filters.shadows.dropShadow }); });
样式化函数(styleFunc:function(item){ if(item.y<10){ return { fill :"red" }; }elseif(item.y>60){ return { fill:"green" }; }
return {}; }});
});
标注(label:true, labelStyle:"outside", labelOffset:25 }); });
1.4.6 Spider Spider有一些特殊的参数去设置,参数如下: defaultParams: { precision:1, labelOffset: -10, // axis title offset divisions: 3, // axis tick count axisColor: "", // spider axis color axisWidth: 0, // spider axis stroke width axisFont:"normal normal normal 11pt Arial"// spider axis font spiderColor: "", // spider web color spiderWidth: 0, // spider web stroke width seriesWidth: 0, // plot border with seriesFillAlpha:0.2, // plot fill opacity spiderOrigin: 0.16, // distance of 0 value from the middle of the circle markerSize: 3, // radius of plot vertex (px) divisions:5, // set division of the radar chart precision:0, // set decimal of the displayed number spiderType: "polygon", // style of spider web,"polygon" or "circle" animationType: dojo.fx.easing.backOut, }
下面的例子展示了相关参数的使用与设置: require(["dojox/charting/plot2d/Spider","dojox/charting/widget/SelectableLegend", function(Spider, SelectableLegend,...){ // ... chart.addPlot("default", { type: Spider, labelOffset:-10, divisions:5, seriesFillAlpha:0.2, markerSize:3, precision:0, spiderType:"polygon" });
chart.addSeries("China", {data: {"GDP":2,"area":6,"population":2000,"inflation":15,"growth":12}}, { fill:"blue" }); chart.addSeries("USA", {data: {"GDP":3,"area":20,"population":1500,"inflation":10,"growth":3}}, { fill:"green" }); // ... chart.addSeries("Canada", {data: {"GDP":1,"area":18,"population":300,"inflation":3,"growth":15}}, { fill:"purple" }); chart.render();
var legend =new SelectableLegend({chart: chart,horizontal:true},"legend"); });
1.4.7 grid Grid也是一个参数比较独特的图表。该图表在marker绘制直线,并通过四个布尔型的参数设置直线是否显示,如下: require(["dojox/charting/plot2d/Grid", function(Grid, { type: Grid, hMajorLines:true, hMinorLines:false, vMajorLines:true, vMinorLines:false, majorHLine: { color:"green", width:3 }, majorVLine: { color:"red", width:3 } }); });
1.5 配置坐标轴 1.5.1 制定坐标轴 require(["dojox/charting/plot2d/Lines", {type: Lines,hAxis:"x", vAxis:"y"}); chart.addAxis("x"); chart.addAxis("y", {vertical:true}); });
零值处理 chart.addAxis("x", {fixUpper:"major", fixLower:"minor"}); chart.addAxis("y", {vertical:true, fixUpper:"major", includeZero:true}); 坐标标注重复处理leftBottom require(["dojox/charting/Chart", function(Chart, Lines,...){ // ... var chart =new Chart("simplechart"); chart.addPlot("default", {type: Lines}); chart.addPlot("other", {type: Areas,hAxis:"other x", vAxis:"other y"}); chart.addAxis("x"); chart.addAxis("y", {vertical:true}); chart.addAxis("other x", {leftBottom:false}); chart.addAxis("other y", leftBottom:false}); chart.addSeries("Series 1",7]); chart.addSeries("Series 2",1,6,3], {plot:"other", stroke: {color:"blue"}, fill:"lightblue"} );
chart.render();
});
1.5.2 坐标的标题
1.5.3 坐标轴颜色等 chart.addAxis("other y", leftBottom:false, max:7, stroke:"green", font:"normal normal bold 14pt Tahoma", fontColor:"red", majorTick: {color:"red", length:6}, minorTick: {stroke:"black", length:3} });
1.5.4 坐标轴标注 chart.addAxis("x", { labels: [{value:1, text:"Jan"}, {value:2, text:"Feb"}, {value:3, text:"Mar"}, {value:4, text:"Apr"}, {value:5, text:"May"}, {value:6, text:"Jun"}, {value:7, text:"Jul"}, {value:8, text:"Aug"}, {value:9, text:"Sep"}, {value:10, text:"Oct"}, {value:11, text:"Nov"}, {value:12, text:"Dec"}] });
或者labelfunc var myLabelFunc =function(text, value,precision){ return text+" my unit"; };
chart.addAxis("x", { labelFunc: myLabelFunc }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |