最近給客戶做一個B/S架構(gòu)的證券交易大屏幕軟件，其中用到對證券指數(shù)的走勢以及成交量的圖形繪制，由于客戶要求圖形的清晰而且要做成于原來的老系統(tǒng)一樣的圖形顯示效果，就試著用ChartDirector 進(jìn)行圖形繪制，第一次用看著文檔幫助是挺方便的，CTrl+C、CTrl+V就畫出一個走勢圖，看著和客戶給的效果圖差不多，挺簡單的，可到了想調(diào)整細(xì)節(jié)的時候卻發(fā)現(xiàn)怎么都達(dá)不到想要的結(jié)果，費(fèi)了很大的勁才最終得到了想要的效果。下面是我繪制的走勢圖主要代碼(有所修改)：

>>>ChartDirector 5.1版下載

using ChartDirector;

     //生成圖形數(shù)據(jù)信息，iWidth：與畫布有關(guān)的寬度，iHeight:與畫布有關(guān)的高度,dlChartData：Y軸數(shù)據(jù)
        private XYChart GetTrendChart( int iWidth, int iHeight,double[] dlChartData)
        {
            try
            {
                  /***********此處代碼僅供參考，個人取得畫第一個點(diǎn)時從Y軸的中心開始，并且對應(yīng)證券開盤時間******************/
                double dlLin = dlChartData[0];
                double dlMax = dlChartData[0];
                //X軸數(shù)據(jù)
                string[] XData = new string[2880];
                for (int i = 0; i < dlChartData.Length; i++)
                {
                    XData[i] = " ";

                    //取最小數(shù)據(jù)
                    if (dlChartData[i] < dlLin)
                        dlLin = dlChartData[i];

                    //取最大數(shù)據(jù)
                    if (dlChartData[i] > dlMax)
                        dlMax = dlChartData[i];
                }

                //繼續(xù)給未賦值的數(shù)據(jù)賦值
                for (int i = dlChartData.Length; i < 2880; i++)
                {
                    XData[i] = " ";
                }

                //最小數(shù)、最大數(shù)相對于第一個點(diǎn)的浮動大小
                double dlFir = Math.Abs(m_KPNum - dlLin);
                double dlSec = Math.Abs(m_KPNum - dlMax);
                double dlFloat = dlFir > dlSec ? dlFir : dlSec;

/**********************************************/

            /*****************開始畫圖***********************/

// 創(chuàng)建圖形對象
                XYChart c = new XYChart(iWidth, iHeight);

                //設(shè)置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);
                }
               
                  //設(shè)置Y軸的取值范圍
                c.yAxis().setDateScale(dMin, dMax);

                  //設(shè)置Y軸要顯示的網(wǎng)格線的個數(shù)為4
                c.yAxis().setLinearScale(dMin, dMax, (dMax - dMin) / 4);

                 //c.yAxis().setLabel();Y軸設(shè)置過Label后就不能自動生成曲線圖了，需要自己去添加線層
                //c.yAxis().setLabelGap(10);//設(shè)置Y軸標(biāo)簽之間的縫隙
                //c.yAxis().setLabelStep((int)(dMax-dMin)/10);//設(shè)置Y軸標(biāo)簽數(shù)組的顯示跨度
                //c.yAxis().setLabelFormat("{value}%");//格式化標(biāo)簽顯示內(nèi)容
                ////設(shè)置網(wǎng)格上邊和標(biāo)題下邊的區(qū)域大小為(50, 30)，字橫向排列，字體為宋體，大小為9  
                //c.addLegend(50, 30, false, "Arial Bold", 9).setBackground(Chart.Transparent);  

              
                //設(shè)置與Y軸相關(guān)的顏色，其中最后一個參數(shù)為設(shè)置Y軸伸出坐標(biāo)的小頭的顏色，一般不想要的話就設(shè)置成畫布的背景色
                c.yAxis().setColors(0xff0000, 0xff0000, 0xff0000, 0);
                //設(shè)置Y軸標(biāo)簽樣式
                c.yAxis().setLabelStyle("simhei.ttf", 8, 0xFFFFFF);

                //設(shè)置Y軸標(biāo)簽的顏色（前兩個和最后一個顏色各自相同，中間一個為白色）
                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}");

                //設(shè)置X軸
                //為了實(shí)現(xiàn)X軸上隔行變實(shí)現(xiàn)的效果，添加了幾個標(biāo)記
                c.xAxis().addMark(720,0xff0000);//隔行實(shí)線
                c.xAxis().addMark(1440, 0xff0000);//隔行實(shí)線
                c.xAxis().addMark(2160, 0xff0000);//隔行實(shí)線

                c.xAxis().setColors(0xff0000, 0xff0000, 0xff0000, 0);
                c.xAxis().setLabelStyle("simhei.ttf", 5, 0xFFFFFF);
                c.xAxis().setLabels(XData);
                c.xAxis().setLabelStep(360
                //設(shè)置標(biāo)題
                c.addTitle(Chart.Top, "上證指數(shù)", "Arial", 7.5, 0xffffff, 0x31319c);
       

                //繪制曲線圖所需的數(shù)據(jù)
                c.addLineLayer(dlChartData,0xffffff);

                //設(shè)置背景色為白色 橫坐標(biāo)和縱坐標(biāo)的網(wǎng)格線顏色，其中參數(shù)三和參數(shù)四為畫布的顏色，參數(shù)八和參數(shù)九為設(shè)置網(wǎng)格線為虛線（這里需要的為一個枚舉變量）
                c.setPlotArea(47, 18, iWidth - 50, iHeight - 23, 0, -1, 0xff0000, c.dashLineColor(0xff0000, Chart.DotLine), c.dashLineColor(0xff0000, Chart.DotLine));

                //設(shè)置背景
                c.setBackground(0);      

                return c;
            }
            catch (Exception e)
            {
                throw e;
            }
        }

這個就是用 ChartDirector 實(shí)現(xiàn)一個虛線的網(wǎng)格線，并且隔行變實(shí)線，Y軸的標(biāo)簽顯示不同的顏色，X軸顯示的時間為正常的證券交易時間，曲線圖為相應(yīng)時間對應(yīng)的數(shù)據(jù)（在前面注釋部分提過）的圖形，對于ChartDirector畫圖需要掌握它畫圖的原理，就能畫出想要的圖形對應(yīng)的坐標(biāo)標(biāo)簽，以下為提供的一些意見（僅供參考）：

      1、準(zhǔn)備的Y軸的數(shù)據(jù)數(shù)組和X軸的標(biāo)簽數(shù)組建議相對應(yīng)，這樣才能確定在坐標(biāo)軸上的某個點(diǎn)的位置是正確的位置。
      2、ChartDirector畫出的圖形的起始位置是從X軸的原點(diǎn)開始，如果想要實(shí)現(xiàn)從X軸的某個點(diǎn)開始的話需要在X軸標(biāo)簽數(shù)組的前部分補(bǔ)空，在Y軸的數(shù)據(jù)數(shù)組相應(yīng)的前部分補(bǔ)上Y軸的最小坐標(biāo)（但會出現(xiàn)斜線上升的情況，這個就不太理想了）。
      3、對于X軸圖形的結(jié)束位置，需要的話要在數(shù)據(jù)數(shù)組后面部分補(bǔ)上相應(yīng)的空值，這樣就能使圖形不至于頂?shù)阶鴺?biāo)軸的末尾。
      4、X軸的標(biāo)簽數(shù)組長度可以大于Y軸，Y軸數(shù)據(jù)數(shù)組長度最好不要大于X軸，因?yàn)檫@樣圖形就會顯示不全。
      5、設(shè)置Y軸的標(biāo)簽數(shù)據(jù)后，就不會自動生成圖形了，需要自己添加圖形層。
      6、合理運(yùn)用 c.xAxis().setLabelStep（）這個方法。