//hbar 条形图 namespace gdip.chart; class hbar{ ctor(plusCtrl){ if(!plusCtrl[["hwnd"]]){ error("参数 @1 必须指定 plus 控件对象",2); } plusCtrl.onDrawContent = function(graphics,rc,txtColor,rcContent,foreColor,font){ var dataset = this.dataset; if(!#dataset[["data"]]) { return; } var data = dataset.data; var labels = dataset.labels : []; var colors = dataset.colors : [ 0xFF5499C7, // Softer Blue 0xFFF5B041, // Softer Orange 0xFF58D68D, // Fresher Green 0xFFEC7063, // Milder Red 0xFFAF7AC5, // Elegant Purple 0xFFF4D03F, // Better-contrast Yellow 0xFF5DADE2, // Bright Cyan 0xFFF1948A, // Soft Coral Pink 0xFFAAB7B8, // Neutral Cool Gray 0xFF48C9B0 // Mint Green / Teal ]; var maxValue = dataset.maxValue; if( maxValue === null ) maxValue = reduce(data, function (a, b) { if a > b return a; return b; }) //获取 DPI 缩放像素大小 var dpiScaleX1,dpiScaleY1 = plusCtrl.dpiScale(1,1); var brushBgChart = ..gdip.solidBrush(foreColor); var pen = ..gdip.pen(dataset.axisColor : txtColor : 0xFFDEE2E6,dpiScaleY1); var textBrush = ..gdip.solidBrush(txtColor : 0xFF2C3E50); var format = ..gdip.stringformat(); format.align = 1; // 水平居中 var formatLeft = ..gdip.stringformat(); formatLeft.align = 0; // 左对齐 formatLeft.lineAlign = 1; //垂直居中 var formatRight = ..gdip.stringformat(); formatRight.align = 2; // 右对齐 formatRight.lineAlign = 1; //垂直居中 graphics.fillRectangle(brushBgChart,rcContent); var fontHeight = font.getHeight(graphics) var fontMargionRight = fontHeight*2; // 预留右侧数值空间 // 动态计算左侧标签所需的最大宽度 var fontMargionLeft = fontHeight*3; // 默认左侧边距 if(#labels > 0) { //在字符串数组找出中最长的字符串 var longestLabel = reduce(labels, lambda(a, b) #a > #b ? a : b); if(#longestLabel){ var labelRect = graphics.measureString(longestLabel, font, ::RECTF(0, 0, rc.width, rc.height), formatRight, textBrush); fontMargionLeft = labelRect.width + dpiScaleX1*10; // 额外10像素间距 } } //预留左右文字空间 rcContent.left = rcContent.left + fontMargionLeft; rcContent.right = rcContent.right - fontMargionRight; rcContent.top = rc.top + dpiScaleY1*5; // 预留顶部边距 rcContent.bottom = rcContent.bottom - dpiScaleY1*5; // 预留底部边距 var bottom,right = rcContent.bottom, rcContent.right; var left,top = rcContent.left, rcContent.top; var width,height = rcContent.width, rcContent.height; var barHeight = height / #data; graphics.drawLine(pen, left, top, left, bottom); // Y 轴 graphics.drawLine(pen, left, bottom, right, bottom); // X 轴 for(i=1; #data; 1) { var barWidth = (data[i] / maxValue) * width; var y = top + (i - 1) * barHeight; var x = left; var h = barHeight * 0.6; // 条形高度为间隔的 60% var barY = y + barHeight * 0.2; // 条形在间隔内居中 var barColor = colors[(i - 1) % #colors + 1]; var barBrush = ..gdip.solidBrush(barColor); graphics.fillRectangle(barBrush, x, barY, barWidth, h); barBrush.delete(); // 绘制数值标签(在条形右侧) var valueLabel = tostring(data[i]); graphics.drawString(valueLabel, font, ::RECTF(barWidth + x + dpiScaleX1*5, barY, fontMargionRight, h), formatLeft, textBrush); // 绘制类别标签(在Y轴左侧) var categoryLabel = labels[i] : ""; graphics.drawString(categoryLabel, font, ::RECTF(rc.left, barY, fontMargionLeft - dpiScaleX1*5, h), formatRight, textBrush); } brushBgChart.delete(); pen.delete(); textBrush.delete(); format.delete(); formatLeft.delete(); formatRight.delete(); return true; } }; redraw = function(){ plusCtrl.redrawTransparent(); }; draw = function(){ //@Deprecated plusCtrl.redrawTransparent(); }; } /*****intellisense() gdip.chart.hbar = 基于 GDI+ 在 plus 控件内绘制简单条形图(横向)。\n如果要实现更丰富的图表效果,请改用 web.view 等浏览器控件加载 chart.js 等图表组件。 gdip.chart.hbar(__) = 创建条形图对象,参数指定 plus 控件对象。\n此对象在 plus 控件自绘前景的 onDrawContent 事件内绘制条形图。\n条形图的绘制范围为 plus 控件的前景显示范围,前景边距也会成为条形图的边距。\nplus 控件的前景色将显示为条形图的背景色。\n控件设置的字体与字体颜色将用于显示条形图中的文字。\n控件如果设置了文本或图标文本、边框等仍然按设置的样式显示。 gdip.chart.hbar() = !stdGdipChartHBar. !stdGdipChartHBar.dataset = @.dataset = {\n maxValue = 100; //可选指定 X 轴最大值 \n data = [65, 85, 45, 75, 95];\n labels = ["第一季度", "第二季度", "第三季度", "第四季度", "预测"];\n colors = [0xFF3498DB, 0xFF2ECC71, 0xFFE74C3C, 0xFFF1C40F, 0xFF9B59B6];\n axisColor = 0xFFBDC3C7;__/*\n指定条形图配置,字段说明:\nmaxValue: 可选字段,指定 X 轴最大值。\ndata: 数值数组,指定条形图数据。\nlabels: 字符串数组,用于指定所有条形左侧显示的标签。\ncolors: 条形颜色值数组(颜色格式 0xAARRGGBB),可选字段,数组长度可以小于 data 数组的长度。\naxisColor: 坐标轴颜色(颜色格式 0xAARRGGBB),可选字段。\n注意修改 dataset 并不会主动重绘控件,\n如果控件已显示,可调用控件的 redraw 或 redrawTransparent 函数刷新。*/\n}; !stdGdipChartHBar.redraw() = 重绘图表,等价于调用 plus 控件的 redrawTransparent 函数。 end intellisense*****/