日期:2014-05-16  浏览次数:20389 次

dojo实现的柱状图取值问题
<script type="text/javascript">

  dojo.require("dojox.charting.Chart2D");
  dojo.require("dojox.charting.axis2d.Default");
  dojo.require("dojox.charting.plot2d.ClusteredColumns");
  dojo.require("dojo.fx.easing");
  dojo.require("dojox.charting.themes.Tufte");
  dojo.require("dojox.charting.widget.Legend");
  var str = new Array();
  var str2 = new Array();
  <%for (var i = 0; i < 12; i++) {%>
  str.push(<%=shu[i]%>);
  str2.push(<%=su[i]%>);
  <%} %>
// var str=new Array(200000, 100000, 500000, 800000, 200000, 100000, 500000, 800000, 200000, 100000, 500000, 800000);
// var str2 = new Array(30000, 100000, 550000, 150000, 250000, 100000, 200000, 400000, 700000, 400000, 700000, 900000);
  dojo.ready(function () {
  var animChart = new dojox.charting.Chart2D("animChart");//定义图表对象
  animChart.setTheme(dojox.charting.themes.Tufte);
  animChart.addAxis("x", { fixLower: "major", fixUpper: "major", min: 0,to:13, //初始刻度
  labels: [{ value: 1, text: "1月" }, { value: 2, text: "2月" },//定义X轴值
  { value: 3, text: "3月" }, { value: 4, text: "4月" },
  { value: 5, text: "5月" }, { value: 6, text: "6月" },
  { value: 7, text: "7月" }, { value: 8, text: "8月" }, //定义X轴值
  { value: 9, text: "9月" }, { value: 10, text: "10月" },
  { value: 11, text: "11月" }, { value: 12, text: "12月"}],
  stroke: "green",//X轴颜色
  font: "normal normal bold 10pt Tahoma",//X轴值的大小,字体等
  fontColor: "black", //X轴值的颜色
  majorTick: { color: "black", length: 6 }, //X轴大刻度的颜色、长度
  minorTick: { stroke: "black", length: 6} //X轴小刻度的颜色、长度
  });//定义X轴
  animChart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", min: 0,//初始刻度
  to: 1000000,//刻度最大允许值
  title: "签单额",//Y轴提示词
  titleGap: 10, //Y轴提示词离Y轴的距离
  titleFont: "normal normal bold 15pt Tahoma", //Y轴提示词的字体、大小等
  titleFontColor: "#538c9f", //Y轴提示词的颜色
  stroke: "green", //Y轴颜色
  font: "normal normal bold 10pt Tahoma", //Y轴值的字体、大小等
  fontColor: "black", //Y轴值的颜色
  majorTick: { color: "black", length: 5 }, //Y轴大刻度的颜色、长度
  minorTick: { stroke: "black", length: 3} //Y轴小刻度的颜色、长度
  });//定义Y轴
  animChart.addPlot("default", { type: "ClusteredColumns", gap: 5, animate: { duration: 1000, easing: dojo.fx.easing.bounceInOut} });//定义图形
  animChart.addSeries("计划签单金额", str, { stroke: { color: "#538c9f", width: 2 }, fill: "#538c9f" });
  animChart.addSeries("预估签单金额", str2, { stroke: { color: "#ffd700", width: 2 }, fill: "#ffd700" });//定义图表数据、颜色
  // addSeries("Series C", [700000, 500000, 1000000, 200000, 300000], { stroke: { color: "#5f9ea0", width: 2 }, fill: "#5f9ea0" }).
  // animChart.addSeries("Series D", [{x:12,y:str[0],stroke: "black", onmouseover: "Green is 25%"}, {x:11,y:str[0]},{x:9,y:str[0]},{x:1,y:str[0]}, {x:1,y:str[0]}, {x:1,y:str[0]}, {x:1,y:str[0]},{x:1,y:str[0]}, {x:1,y:str[0]}, {x:1,y:str[0]}, {x:1,y:str[0]}, {x:1,y:str[0]}], { stroke: { color: "#538c9f", width: 2 }, fill: "#538c9f" });
   
  ani