ofstream fout("C:\\Users\\Bin\\Desktop\\HTML文本测试.html");
CString tian_All = "All天数据";
CString tian_entry = "Entry天数据";
CString zong_A_html = "All_总数";
CString zong_E_html = "Entry_总数";
int i=0;
//All_zongsu2; //这两个的值用来做可视化界面 是刷新按钮里面的次数
//Entry_zongsu2;
//All_zongsu; //这两是文件全部的值
//Entry_zongsu;
CArray <int, int> m_http_tian;
m_http_tian.InsertAt(All_zongsu2-1, Entry_zongsu2-1);
//输出一次
zong_A_html.Format("%s_开始时间(%s)(%d),%d", zong_A_html, html_zong1, All_zongsu, All_zongsu);
zong_E_html.Format("%s_结束时间(%s)(%d),%d", zong_E_html, html_zong2, Entry_zongsu, Entry_zongsu);
//输出多次
tian_All.Format("%s_开始时间(%s)(%d),%d", tian_All, html_time1, All_zongsu2, All_zongsu2);
tian_entry.Format("%s_结束时间(%s)(%d),%d", tian_entry, html_time2, Entry_zongsu2, Entry_zongsu2);
fout << " <!DOCTYPE> " <<endl;
fout << " <html> " <<endl;
fout << " <head> " <<endl;
fout << " <title>2.html</title> " <<endl;
fout << " <script type = \"text/javascript\"> " <<endl;
fout << " // chart sample data " <<endl;
fout << " var ary = new Array(); " <<endl;
//总共需要三个值第一个是次数要循环几次就是i 第二个就是名字 第三是数据
fout << " ary[" << 0 << "]=\"" << zong_A_html << ";\"" << endl;
fout << " ary[" << 1 << "]=\"" << zong_E_html << ";\"" << endl;
//上面总数据↑ 下面天数据↓
fout << " ary[" << 2 << "]=\"" << tian_All << ";\"" << endl;
fout << " ary[" << 3 << "]=\"" << tian_entry << ";\"" << endl;
fout.open();
fout<<" //下面都是固定的不需要修改↓ "<<endl;
fout<<" var canvas; "<<endl;
fout<<" var context; "<<endl;
fout<<" //表的属性 "<<endl;
fout<<" var cWidth, cHeight, cMargin, cSpace; "<<endl;
fout<<" var cMarginSpace, cMarginHeight; "<<endl;
fout<<" //柱状图的属性 "<<endl;
fout<<" var bWidth, bMargin, totalBars, maxDataValue; "<<endl;
fout<<" var bWidthMargin; "<<endl;
fout<<" //柱状图的动画 "<<endl;
fout<<" var ctr, numctr, speed; "<<endl;
fout<<" //轴属性 "<<endl;
fout<<" var totLabelsOnYAxis; "<<endl;
fout<<" //柱状图的构造函数 "<<endl;
fout<<" function barChart(){ "<<endl;
fout<<" canvas = document.getElementById(\"bchart\"); "<<endl;
fout<<" if (canvas && canvas.getContext){ "<<endl;
fout<<" context = canvas.getContext(\"2d\") "<<endl;
fout<<" } "<<endl;
fout<<" chartSetting(); "<<endl;
fout<<" drawAxisLabelMarkers(); "<<endl;
fout<<" drawChartWithAnimation(); "<<endl;
fout<<" drawText(); "<<endl;
fout<<" } "<<endl;
fout<<" //初始化表和条形图的值 " <<endl;
fout<<" function chartSetting(){ "<<endl;
fout<<" //表的属性 "<<endl;
fout<<" cMargin = 25; "<<endl;
fout<<" cSpace = 60; "<<endl;
fout<<" //表高=画布高-上下边距-60 " <<endl;
fout<<" cHeight = canvas.height - 2 * cMargin - cSpace; "<<endl;
fout<<" //表宽=画布宽-左右边距-60 " <<endl;
fout<<" cWidth = canvas.width - 2 * cMargin - cSpace; "<<endl;
fout<<" //外边距空间=25+60 " <<endl;
fout<<" cMarginSpace = cMargin + cSpace; "<<endl;
fout<<" //外边距高=25+表高 " <<endl;
fout<<" cMarginHeight = cMargin + cHeight; "<<endl;
fout<<" //柱状图属性 "<<endl;
fout<<" bMargin = 15; "<<endl;
fout<<" //几个柱状图 "<<endl;
fout<<" totalBars = ary.length; "<<endl;
fout<<" //柱状图宽=(表宽/柱状图数目)-15 "<<endl;
fout<<" bWidth = (cWidth / totalBars) - bMargin; "<<endl;
fout<<" //在表上绘制值 " <<endl;
fout<<" maxDataValue = 0; "<<endl;
fout<<" for (var i = 0; i<totalBars; i++){ "<<endl;
fout<<" var aryVal = ary[i].split(\",\"); "<<endl;
fout<<" var barVal = parseInt(aryVal[1]); "<<endl;
fout<<" if (parseInt(barVal)>parseInt(maxDataValue)){ "<<endl;
fout<<" maxDataValue = barVal; "<<endl;
fout<<" } "<<endl;
fout<<" } "<<endl;
fout<<" //设置字体 "<<endl;
fout<<" totLabelsOnYAxis = 10; "<<endl;
fout<<" context.font = \"10pt Garamond\"; "<<endl;
fout<<" //初始化动画变量 "<<endl;
fout<<" ctr = 0; "<<endl;
fout<<" numctr = 100; "<<endl;
fout<<" speed = 10; "<<endl;
fout<<" } "<<endl;
fout<<" //绘制表的轴、标签和标记 "<<endl;
fout<<" function drawAxisLabelMarkers(){ "<<endl;
fout<<" context.lineWidth = \"2.0\"; "<<endl;
fout<<" //调用函数drawAxis(),画y轴 " <<endl;
fout<<" drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin); "<<endl;
fout<<" //调用函数drawAxis(),画x轴 " <<endl;
fout<<" drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight); "<<endl;
fout<<" context.lineWidth = \"1.0\"; "<<endl;
fout<<" //调用函数drawMarkers(),画标记 "<<endl;
fout<<" drawMarkers(); "<<endl;
fout<<" } "<<endl;
fout<<" //画轴 " <<endl;
fout<<" function drawAxis(x, y, X, Y){ "<<endl;
fout<<" context.beginPath(); "<<endl;
fout<<" context.moveTo(x, y); "<<endl;
fout<<" context.lineTo(X, Y); "<<endl;
fout<<" context.closePath(); "<<endl;
fout<<" context.stroke(); "<<endl;
fout<<" } "<<endl;
fout<<" //画标记 " <<endl;
fout<<" function drawMarkers(){ "<<endl;
fout<<" var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis); "<<endl;
fout<<" context.textAlign = \"right\"; "<<endl;
fout<<" context.fillStyle = \"#000\"; "<<endl;
fout<<" //Y轴 " <<endl;
fout<<" for (var i = 0; i <= totLabelsOnYAxis; i++){ "<<endl;
fout<<" markerVal = i*numMarkers; "<<endl;
fout<<" markerValHt = i*numMarkers*cHeight; "<<endl;
fout<<" var xMarkers = cMarginSpace - 5; "<<endl;
fout<<" var yMarkers = cMarginHeight - (markerValHt / maxDataValue); "<<endl;
fout<<" //context.fillText(text,x,y,maxWidth); "<<endl;
fout<<" context.fillText(markerVal, xMarkers, yMarkers, cSpace); "<<endl;
fout<<" } "<<endl;
fout<<" //X轴 " <<endl;
fout<<" context.textAlign = 'center'; "<<endl;
fout<<" for (var i = 0; i < totalBars; i++){ "<<endl;
fout<<" arrval = ary[i].split(\",\"); "<<endl;
fout<<" name = arrval[0]; "<<endl;
fout<<" markerXPos = cMarginSpace + bMargin "<<endl;
fout<<" + (i * (bWidth + bMargin)) + (bWidth / 2); "<<endl;
fout<<" markerYPos = cMarginHeight + 10; "<<endl;
fout<<" context.fillText(name, markerXPos, markerYPos, bWidth); "<<endl;
fout<<" } "<<endl;
fout<<" context.save(); "<<endl;
fout<<" //添加Y轴标题 " <<endl;
fout<<" context.translate(cMargin + 10, cHeight / 2); "<<endl;
fout<<" context.rotate(Math.PI * -90 / 180); "<<endl;
fout<<" context.restore(); "<<endl;
fout<<" //添加X轴标题 " <<endl;
fout<<" context.fillText(\"这里可以修改说明\", cMarginSpace + "<<endl;
fout<<" (cWidth / 2), cMarginHeight + 30); "<<endl;
fout<<" } "<<endl;
fout<<" //绘制图表动画 " <<endl;
fout<<" function drawChartWithAnimation(){ "<<endl;
fout<<" for (var i = 0; i<totalBars; i++) { "<<endl;
fout<<" var arrVal = ary[i].split(\",\"); "<<endl;
fout<<" bVal = parseInt(arrVal[1]); "<<endl;
fout<<" bHt = (bVal * cHeight / maxDataValue) / numctr * ctr; "<<endl;
fout<<" if (i % 2 == 0) { "<<endl;
fout<<" bX = cMarginSpace + (i*(bWidth + bMargin) + bMargin); "<<endl;
fout<<" } "<<endl;
fout<<" else{ "<<endl;
fout<<" bX = cMarginSpace + (i*(bWidth + bMargin)); "<<endl;
fout<<" } "<<endl;
fout<<" bY = cMarginHeight - bHt - 2; "<<endl;
fout<<" drawRectangle(bX, bY, bWidth, bHt, true); "<<endl;
fout<<" } "<<endl;
fout<<" if (ctr < numctr) { "<<endl;
fout<<" ctr = ctr + 1; "<<endl;
fout<<" setTimeout(arguments.callee, speed); "<<endl;
fout<<" } "<<endl;
fout<<" "<<endl;
fout<<" } "<<endl;
fout<<" function drawRectangle(x, y, w, h, fill){ "<<endl;
fout<<" context.beginPath(); "<<endl;
fout<<" context.rect(x, y, w, h); "<<endl;
fout<<" context.closePath(); "<<endl;
fout<<" context.stroke(); "<<endl;
fout<<" //颜色变化createLinearGradient()颜色渐变函数 "<<endl;
fout<<" if (fill){ "<<endl;
fout<<" var gradient = context.createLinearGradient(0, 0, 0, 300); //颜色变化 "<<endl;
fout<<" gradient.addColorStop(0, 'yellow'); "<<endl;
fout<<" //gradient.addColorStop(1, 'rgba(67,203,36,.15)'); "<<endl;
fout<<" gradient.addColorStop(1, 'red'); "<<endl;
fout<<" context.fillStyle = gradient; "<<endl;
fout<<" context.strokeStyle = gradient; "<<endl;
fout<<" context.fill(); "<<endl;
fout<<" } "<<endl;
fout<<" } "<<endl;
fout<<" //柱状图上面的文本 "<<endl;
fout<<" function drawText(){ "<<endl;
fout<<" for (var i = 0; i<totalBars; i++) { "<<endl;
fout<<" var arrVal = ary[i].split(\",\"); "<<endl;
fout<<" bVal = parseInt(arrVal[1]); "<<endl;
fout<<" if (i % 2 == 0) { "<<endl;
fout<<" bX = cMarginSpace + (i*(bWidth + bMargin) + bMargin); "<<endl;
fout<<" } "<<endl;
fout<<" else{ "<<endl;
fout<<" bX = cMarginSpace + (i*(bWidth + bMargin)) + 15; "<<endl;
fout<<" } "<<endl;
fout<<" bHt = 10 * parseInt(maxDataValue / totLabelsOnYAxis)*cHeight; "<<endl;
fout<<" bY = cMarginHeight - (markerValHt / maxDataValue) - 15; "<<endl;
fout<<" context.fillStyle = \"red\"; "<<endl;
fout<<" context.fillText(bVal, bX, bY, bWidth); "<<endl;
fout<<" } "<<endl;
fout<<" "<<endl;
fout<<" } "<<endl;
fout<< "</script> "<<endl;
fout << " </head> "<<endl;
fout << " <body onLoad = \"barChart();\">" << endl;
fout << "<div style = \"width: 1200px;margin-left: auto;margin-right: auto;\"> "<<endl;
fout << "<div style = \"width:1200px;margin-left:auto;margin-right:auto;\"> "<<endl;
//tian_All = "All天数据"; html_time1 开始时间 这里要循环判断输出多次
//tian_entry = "Entry天数据"; html_time2 结束时间
//zong_A_html = "All_总数"; html_zong1 开始时间 输出一次
//zong_E_html = "Entry_总数"; html_zong2 结束时间 All_zongsu2 all数据整数 Entry_zongsu Entry数据整数
fout << "<p><font size = \"4\"color = #b92e24> 开始时间： <font size = \"3\" color = #4CAF50>" <<html_zong1<< "<font size = \"4\"color = #b92e24 > 结束时间： <font size = \"3\" color = #4CAF50>"<<html_zong2<<" </font> " <<endl;
fout << "<font size = \"4\"color = #b92e24> 全部数据： All : <font size = \"3\" color = #03a9f4>" << All_zongsu << " </font> Enter : <font size = \"3\" color = #03a9f4>"<< Entry_zongsu <<" </font> </p> " << endl;
//上总数 下天数
fout << "<p><font size = \"4\"color = #b92e24> 开始时间： <font size = \"3\" color = #4CAF50>" << html_time1 << "<font size = \"4\"color = #b92e24 > 结束时间： <font size = \"3\" color = #4CAF50>" << html_time2 << " </font> " << endl;
fout << "<font size = \"4\"color = #b92e24> 筛选数据： All : <font size = \"3\" color = #03a9f4>" << All_zongsu2 << " </font> Enter : <font size = \"3\" color = #03a9f4>" << Entry_zongsu2 << "</font> </p> " << endl;
fout << "<canvas id = \"bchart\" height = \"800\" width = \"1200\"></canvas> " <<endl;
fout << " </div>" << endl;
UINT i2 = MessageBox("HTML生成成功,是否打开？", TEXT("温馨提示"), MB_OKCANCEL | MB_ICONQUESTION);
if (i == IDOK)
{
MessageBox("浏览器打开");
}
fout.close();
}
扫一扫
2606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
