Web图表开发--用ChartDirector画证券走势图

最近给客户做一个B/S架构的证券交易大屏幕软件，其中用到对证券指数的走势以及成交量的图形绘制，由于客户要求图形的清晰而且要做成于原来的老系统一样的图形显示效果，就试着用ChartDirector进行图形绘制，下面说个人绘制的走势图主要代码(有所修改)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

using ChartDirector;         //生成图形数据信息，iWidth：与画布有关的宽度，iHeight:与画布有关的高度,dlChartData：Y轴数据          private XYChart GetTrendChart( int iWidth, int iHeight, double [] dlChartData)          {              try              {                    /***********此处代码仅供参考，个人取得画第一个点时从Y轴的中心开始，并且对应证券开盘时间******************/                  double dlLin = dlChartData[0];                  double dlMax = dlChartData[0];                  //X轴数据                  string [] XData = new string [2880];                  for ( int i = 0; i < dlChartData.Length; i++)                  {                      XData[i] = " " ;                        //取最小数据                      if (dlChartData[i] < dlLin)                          dlLin = dlChartData[i];                        //取最大数据                      if (dlChartData[i] > dlMax)                          dlMax = dlChartData[i];                  }                    //继续给未赋值的数据赋值                  for ( int i = dlChartData.Length; i < 2880; i++)                  {                      XData[i] = " " ;                  }                    //最小数、最大数相对于第一个点的浮动大小                  double dlFir = Math.Abs(m_KPNum - dlLin);                  double dlSec = Math.Abs(m_KPNum - dlMax);                  double dlFloat = dlFir > dlSec ? dlFir : dlSec;                /**********************************************/                /*****************开始画图***********************/                    // 创建图形对象                  XYChart c = new XYChart(iWidth, iHeight);                    //设置Y轴                  double dMin = Math.Round(m_KPNum - dlFloat, 2);                  double dMax = Math.Round(m_KPNum + dlFloat, 2);                                   if ((dMax - dMin) < dlChartData[0] * 0.5)                  {                      dMax = Math.Round(dlChartData[0] + dlChartData[0] * 0.5,2);                      dMin = Math.Round(dlChartData[0] - dlChartData[0] * 0.5,2);                  }                                      //设置Y轴的取值范围                  c.yAxis().setDateScale(dMin, dMax);                      //设置Y轴要显示的网格线的个数为4                  c.yAxis().setLinearScale(dMin, dMax, (dMax - dMin) / 4);                     //c.yAxis().setLabel();Y轴设置过Label后就不能自动生成曲线图了，需要自己去添加线层                  //c.yAxis().setLabelGap(10);//设置Y轴标签之间的缝隙                  //c.yAxis().setLabelStep((int)(dMax-dMin)/10);//设置Y轴标签数组的显示跨度                  //c.yAxis().setLabelFormat("{value}%");//格式化标签显示内容                  ////设置网格上边和标题下边的区域大小为(50, 30)，字横向排列，字体为宋体，大小为9                    //c.addLegend(50, 30, false, "Arial Bold", 9).setBackground(Chart.Transparent);                                      //设置与Y轴相关的颜色，其中最后一个参数为设置Y轴伸出坐标的小头的颜色，一般不想要的话就设置成画布的背景色                  c.yAxis().setColors(0xff0000, 0xff0000, 0xff0000, 0);                  //设置Y轴标签样式                  c.yAxis().setLabelStyle( "simhei.ttf" , 8, 0xFFFFFF);                    //设置Y轴标签的颜色（前两个和最后一个颜色各自相同，中间一个为白色）                  c.yAxis().setMultiFormat(Chart.SelectItemFilter(0), "<*color=23ff45*> {value}" );                  c.yAxis().setMultiFormat(Chart.SelectItemFilter(1), "<*color=23ff45*> {value}" );                  c.yAxis().setMultiFormat(Chart.SelectItemFilter(2), "<*color=FFffFF*> {value}" );                  c.yAxis().setMultiFormat(Chart.SelectItemFilter(3), "<*color=ff2345*> {value}" );                  c.yAxis().setMultiFormat(Chart.SelectItemFilter(4), "<*color=ff2345*> {value}" );                    //设置X轴                  //为了实现X轴上隔行变实现的效果，添加了几个标记                  c.xAxis().addMark(720,0xff0000); //隔行实线                  c.xAxis().addMark(1440, 0xff0000); //隔行实线                  c.xAxis().addMark(2160, 0xff0000); //隔行实线                    c.xAxis().setColors(0xff0000, 0xff0000, 0xff0000, 0);                  c.xAxis().setLabelStyle( "simhei.ttf" , 5, 0xFFFFFF);                  c.xAxis().setLabels(XData);                  c.xAxis().setLabelStep(360                  //设置标题                  c.addTitle(Chart.Top, "上证指数" , "Arial" , 7.5, 0xffffff, 0x31319c);                             //绘制曲线图所需的数据                  c.addLineLayer(dlChartData,0xffffff);                    //设置背景色为白色 横坐标和纵坐标的网格线颜色，其中参数三和参数四为画布的颜色，参数八和参数九为设置网格线为虚线（这里需要的为一个枚举变量）                  c.setPlotArea(47, 18, iWidth - 50, iHeight - 23, 0, -1, 0xff0000, c.dashLineColor(0xff0000, Chart.DotLine), c.dashLineColor(0xff0000, Chart.DotLine));                    //设置背景                  c.setBackground(0);                         return c;              }              catch (Exception e)              {                  throw e;              }          }

好了这个就是用ChartDirector实现一个虚线的网格线，并且隔行变实线，Y轴的标签显示不同的颜色，X轴显示的时间为正常的证券交易时间，曲线图为相应时间对应的数据（在前面注释部分提过）的图形，对于ChartDirector画图需要掌握它画图的原理，就能画出想要的图形对应的坐标标签，以下为提供的一些意见（仅供参考）：

1. 准备的Y轴的数据数组和X轴的标签数组建议相对应，这样才能确定在坐标轴上的某个点的位置是正确的位置
2. ChartDirector画出的图形的起始位置是从X轴的原点开始，如果想要实现从X轴的某个点开始的话需要在X轴标签数组的前部分补空，在Y轴的数据数组相应的前部分补上Y轴的最小坐标（但会出现斜线上升的情况，这个就不太理想了）。
3. 对于X轴图形的结束位置，需要的话要在数据数组后面部分补上相应的空值，这样就能使图形不至于顶到坐标轴的末尾。
4. X轴的标签数组长度可以大于Y轴，Y轴数据数组长度最好不要大于X轴，因为这样图形就会显示不全。
5. 设置Y轴的标签数据后，就不会自动生成图形了，需要自己添加图形层。
6. 合理运用 c.xAxis().setLabelStep（）这个方法。