| 1 | async function drawChart(chart, anchor, canvas, ctx) { |
| 2 | if (!canvas) { |
| 3 | canvas = document.createElement('canvas') |
| 4 | let width = anchor[2] |
| 5 | let height = anchor[3] |
| 6 | canvas.width = width * 2 |
| 7 | canvas.height = height * 2 |
| 8 | canvas.style.width = width + 'px' |
| 9 | canvas.style.height = height + 'px' |
| 10 | let ctx = canvas.getContext('2d') |
| 11 | ctx.scale(2, 2) |
| 12 | ctx.imageSmoothingEnabled = true |
| 13 | ctx.imageSmoothingQuality = 'high' |
| 14 | } |
| 15 | if (!ctx) { |
| 16 | ctx = canvas.getContext('2d') |
| 17 | } |
| 18 | ctx.imageSmoothingEnabled = true |
| 19 | ctx.imageSmoothingQuality = 'high' |
| 20 | let title = chart.title |
| 21 | let legend = chart.legend |
| 22 | let chartData = chart.chartData[0] |
| 23 | let chartType = chartData.chartType |
| 24 | if (chartType == 'bar') { |
| 25 | // 柱状图、条形图 |
| 26 | let type = chartData.extInfo.type |
| 27 | if (type == 'bar') { |
| 28 | // 条形图 |
| 29 | await drawBarChartWithBar(title, chartData, legend, anchor, canvas, ctx) |
| 30 | } else { |
| 31 | // 柱状图 |
| 32 | await drawBarChartWithCol(title, chartData, legend, anchor, canvas, ctx) |
| 33 | } |
| 34 | } else if (chartType == 'pie' || chartType == 'doughnut') { |
| 35 | // 饼图、圆环图 |
| 36 | await drawPieChart(title, chartData, legend, anchor, canvas, ctx) |
| 37 | } else if (chartType == 'line') { |
| 38 | // 折线图 |
| 39 | await drawLineChart(title, chartData, legend, anchor, canvas, ctx) |
| 40 | } else { |
| 41 | // 其他: 暂不支持 |
| 42 | await drawRect(ctx, { |
| 43 | strokeStyle: { |
| 44 | lineWidth: 0.5, |
| 45 | paint: { type: 'color', color: { color: -2500135 } } |
| 46 | }, |
| 47 | anchor: [anchor[0] + 0.5, anchor[1] + 0.5, anchor[2] - 1, anchor[3] - 1] |
| 48 | }) |
| 49 | let str = '该图表暂不支持渲染' |
| 50 | ctx.font = `${Math.min(anchor[2] * 0.056, 16)}px 等线` |
| 51 | ctx.fillStyle = 'rgb(153, 153, 153)' |
| 52 | let textWidth = ctx.measureText(str).width |
| 53 | ctx.fillText(str, anchor[0] + anchor[2] / 2 - textWidth / 2, anchor[1] + anchor[3] / 2 - 8) |
| 54 | } |
| 55 | return canvas |
| 56 | } |
| 57 | |
| 58 | async function drawBarChartWithBar(title, chartData, legend, anchor, canvas, ctx) { |
| 59 | if (title) { |
| 60 | ctx.font = `${Math.min(anchor[3] * 0.064, 18.5)}px 等线` |
| 61 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 62 | let textWidth = ctx.measureText(title).width |
| 63 | ctx.fillText(title, anchor[0] + anchor[2] / 2 - textWidth / 2, anchor[1] + anchor[3] * 0.06) |
| 64 | } |
| 65 | let extInfo = chartData.extInfo |
| 66 | let series = chartData.series |
| 67 | let categoryAxis = chartData.categoryAxis |
| 68 | let valueAxes = chartData.valueAxes && chartData.valueAxes.length > 0 ? chartData.valueAxes[0] : null |
| 69 | let minValue = 0, maxValue = 0 |
| 70 | for (let i = 0; i < series.length; i++) { |
| 71 | minValue = Math.min(minValue, ...series[i].value.data) |
| 72 | maxValue = Math.max(maxValue, ...series[i].value.data) |
| 73 | } |
| 74 | ctx.lineWidth = 0.5 |
| 75 | ctx.font = `${Math.min(anchor[2] * 0.048, 14)}px 等线` |
| 76 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 77 | ctx.strokeStyle = 'rgb(217, 217, 217)' |
| 78 | let categorys = series[0].category.data |
| 79 | let maxCw = ctx.measureText('00').width |
| 80 | for (let i = 0; i < categorys.length; i++) { |
| 81 | let w = ctx.measureText(categorys[i] + '0').width |
| 82 | if (w > maxCw) { |
| 83 | maxCw = w |
| 84 | } |
| 85 | } |
| 86 | let sGap = valueAxes && !valueAxes.deleted ? maxCw : anchor[2] * 0.15 |
| 87 | let x = anchor[0] + sGap |
| 88 | let xWidth = anchor[2] - sGap - anchor[2] * 0.04 |
| 89 | let startY = title ? anchor[3] * 0.12 : anchor[3] * 0.05 |
| 90 | let y = anchor[1] + startY |
| 91 | let yHeight = anchor[3] - startY - anchor[3] * 0.15 |
| 92 | let minTicks = xWidth / 10 > 20 ? 11 : 6 |
| 93 | let ticks = calculateTicks(minValue, maxValue, minTicks, 11) |
| 94 | let xGap = xWidth / (ticks.length - 1) |
| 95 | ctx.beginPath() |
| 96 | for (let i = 0; i < ticks.length; i++) { |
| 97 | // x轴数值 |
| 98 | if (valueAxes && !valueAxes.deleted) { |
| 99 | ctx.textAlign = 'center' |
| 100 | let v = ticks[i] |
| 101 | let vs = v.toString() |
| 102 | if (vs.indexOf('.') > -1 && vs.split('.')[1].length > 1) { |
| 103 | vs = v.toFixed(1) |
| 104 | } |
| 105 | ctx.fillText(vs, x, y + yHeight + anchor[3] * 0.05) |
| 106 | ctx.textAlign = 'start' |
| 107 | } |
| 108 | if (extInfo.majorGridlines == 'true') { |
| 109 | // 网格线 |
| 110 | ctx.moveTo(x, y) |
| 111 | ctx.lineTo(x, y + yHeight) |
| 112 | } |
| 113 | x += xGap |
| 114 | } |
| 115 | ctx.stroke() |
| 116 | let yGap = anchor[3] * 0.04 // y开始 |
| 117 | y += yGap |
| 118 | x = anchor[0] + sGap |
| 119 | let vGap = anchor[3] * 0.015 // 柱子间距 |
| 120 | let catGap = vGap * 5 // 类目间距 |
| 121 | let categoryHeight = (yHeight - catGap * (categorys.length - 1) - yGap * 2) / categorys.length |
| 122 | let vHeight = (categoryHeight - vGap * (series.length - 1)) / series.length |
| 123 | // 绘制类目和柱状图 |
| 124 | for (let i = 0; i < categorys.length; i++) { |
| 125 | if (categoryAxis && !categoryAxis.deleted) { |
| 126 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 127 | let _cy = (categoryHeight + catGap) * i + categoryHeight / 2 + 6 |
| 128 | ctx.textAlign = 'right' |
| 129 | ctx.fillText(categorys[categorys.length - 1 - i], x - 4, y + _cy) |
| 130 | ctx.textAlign = 'start' |
| 131 | } |
| 132 | for (let j = 0; j < series.length; j++) { |
| 133 | let seriesData = series[series.length - 1 - j] |
| 134 | let valueData = seriesData.value.data |
| 135 | let vWidth = (valueData[valueData.length - 1 - i] / ticks[ticks.length - 1]) * xWidth |
| 136 | let _x = x |
| 137 | let _y = y + (categoryHeight + catGap) * i + (vHeight + vGap) * j |
| 138 | let _anchor = [_x, _y, vWidth, vHeight] |
| 139 | // 柱状图 |
| 140 | await drawRect(ctx, { |
| 141 | fillStyle: seriesData.property.fillStyle, |
| 142 | strokeStyle: seriesData.property.strokeStyle, |
| 143 | anchor: _anchor |
| 144 | }) |
| 145 | } |
| 146 | } |
| 147 | if (legend) { |
| 148 | // 绘制v标签标识 |
| 149 | x = anchor[0] + sGap |
| 150 | let vTexts = [] |
| 151 | let vTextWidth = 0 |
| 152 | for (let i = 0; i < series.length; i++) { |
| 153 | let s = series[i].text.data[0] |
| 154 | vTexts.push(s) |
| 155 | vTextWidth += ctx.measureText(s).width |
| 156 | } |
| 157 | vGap = anchor[3] * 0.03 |
| 158 | let _iw = Math.min(anchor[2] * 0.028, 15) |
| 159 | let _y = y + yHeight + anchor[3] * 0.1 |
| 160 | let _x = x + xWidth / 2 - (vTextWidth + vGap * (vTexts.length - 1) + (_iw * 1.25) * vTexts.length) / 2 |
| 161 | for (let i = 0; i < vTexts.length; i++) { |
| 162 | await drawRect(ctx, { |
| 163 | fillStyle: series[series.length - 1 - i].property.fillStyle, |
| 164 | strokeStyle: series[series.length - 1 - i].property.strokeStyle, |
| 165 | anchor: [_x, _y - _iw, _iw, _iw] |
| 166 | }) |
| 167 | _x += (_iw * 1.25) |
| 168 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 169 | let str = vTexts[vTexts.length - 1 - i] |
| 170 | ctx.fillText(str, _x, _y) |
| 171 | _x += ctx.measureText(str).width |
| 172 | _x += vGap |
| 173 | } |
| 174 | } |
| 175 | } |
| 176 | |
| 177 | async function drawBarChartWithCol(title, chartData, legend, anchor, canvas, ctx) { |
| 178 | if (title) { |
| 179 | ctx.font = `${Math.min(anchor[3] * 0.07, 18.5)}px 等线` |
| 180 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 181 | let textWidth = ctx.measureText(title).width |
| 182 | ctx.fillText(title, anchor[0] + anchor[2] / 2 - textWidth / 2, anchor[1] + anchor[3] * 0.06) |
| 183 | } |
| 184 | let extInfo = chartData.extInfo |
| 185 | let series = chartData.series |
| 186 | let categoryAxis = chartData.categoryAxis |
| 187 | let valueAxes = chartData.valueAxes && chartData.valueAxes.length > 0 ? chartData.valueAxes[0] : null |
| 188 | let minValue = 0, maxValue = 0 |
| 189 | for (let i = 0; i < series.length; i++) { |
| 190 | minValue = Math.min(minValue, ...series[i].value.data) |
| 191 | maxValue = Math.max(maxValue, ...series[i].value.data) |
| 192 | } |
| 193 | ctx.lineWidth = 0.5 |
| 194 | ctx.font = `${Math.min(anchor[3] * 0.06, 14)}px 等线` |
| 195 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 196 | ctx.strokeStyle = 'rgb(217, 217, 217)' |
| 197 | let startY = title ? anchor[3] * 0.12 : anchor[3] * 0.05 |
| 198 | let y = anchor[1] + startY |
| 199 | let yHeight = anchor[3] - startY - anchor[3] * 0.15 |
| 200 | let mixTicks = yHeight / 10 > 20 ? 11 : 6 |
| 201 | let ticks = calculateTicks(minValue, maxValue, mixTicks, 11) |
| 202 | let xGap = ctx.measureText(ticks[ticks.length - 1] + '00').width |
| 203 | let x = anchor[0] + xGap |
| 204 | let xWidth = anchor[2] - xGap * 1.5 |
| 205 | let yGap = yHeight / (ticks.length - 1) |
| 206 | ctx.beginPath() |
| 207 | for (let i = 0; i < ticks.length; i++) { |
| 208 | if (valueAxes && !valueAxes.deleted) { |
| 209 | // y轴数值 |
| 210 | ctx.textAlign = 'right' |
| 211 | let v = ticks[ticks.length - 1 - i] |
| 212 | let vs = v.toString() |
| 213 | if (vs.indexOf('.') > -1 && vs.split('.')[1].length > 1) { |
| 214 | vs = v.toFixed(1) |
| 215 | } |
| 216 | ctx.fillText(vs, x - 4, y + 6) |
| 217 | ctx.textAlign = 'start' |
| 218 | } |
| 219 | if (extInfo.majorGridlines == 'true') { |
| 220 | // 网格线 |
| 221 | ctx.moveTo(x, y) |
| 222 | ctx.lineTo(x + xWidth, y) |
| 223 | } |
| 224 | y += yGap |
| 225 | } |
| 226 | ctx.stroke() |
| 227 | x += xGap |
| 228 | y -= yGap |
| 229 | let vGap = anchor[2] * 0.01 // 柱子间距 |
| 230 | let catGap = vGap * 6 // 类目间距 |
| 231 | let categorys = series[0].category.data |
| 232 | let categoryWidth = (xWidth - catGap * (categorys.length - 1) - xGap * 1.5) / categorys.length |
| 233 | let vWidth = (categoryWidth - vGap * (series.length - 1)) / series.length |
| 234 | // 绘制类目和柱状图 |
| 235 | for (let i = 0; i < categorys.length; i++) { |
| 236 | if (categoryAxis && !categoryAxis.deleted) { |
| 237 | let _cx = (categoryWidth + catGap) * i + categoryWidth / 2 - ctx.measureText(categorys[i]).width / 2 |
| 238 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 239 | ctx.fillText(categorys[i], x + _cx, y + anchor[3] * 0.055) |
| 240 | } |
| 241 | for (let j = 0; j < series.length; j++) { |
| 242 | let vHeight = (series[j].value.data[i] / ticks[ticks.length - 1]) * yHeight |
| 243 | let _x = x + (categoryWidth + catGap) * i + (vWidth + vGap) * j |
| 244 | let _y = y - vHeight |
| 245 | let _anchor = [_x, _y, vWidth, vHeight] |
| 246 | // 柱状图 |
| 247 | await drawRect(ctx, { |
| 248 | fillStyle: series[j].property.fillStyle, |
| 249 | strokeStyle: series[j].property.strokeStyle, |
| 250 | anchor: _anchor |
| 251 | }) |
| 252 | } |
| 253 | } |
| 254 | if (legend) { |
| 255 | // 绘制v标签标识 |
| 256 | x = anchor[0] + xGap |
| 257 | let vTexts = [] |
| 258 | let vTextWidth = 0 |
| 259 | for (let i = 0; i < series.length; i++) { |
| 260 | let s = series[i].text.data[0] |
| 261 | vTexts.push(s) |
| 262 | vTextWidth += ctx.measureText(s).width |
| 263 | } |
| 264 | vGap = anchor[2] * 0.02 |
| 265 | let _iw = Math.min(anchor[2] * 0.025, 15) |
| 266 | let _y = y + anchor[3] * 0.125 |
| 267 | let _x = x + xWidth / 2 - (vTextWidth + vGap * (vTexts.length - 1) + (_iw * 1.25) * vTexts.length) / 2 |
| 268 | for (let i = 0; i < vTexts.length; i++) { |
| 269 | await drawRect(ctx, { |
| 270 | fillStyle: series[i].property.fillStyle, |
| 271 | strokeStyle: series[i].property.strokeStyle, |
| 272 | anchor: [_x, _y - _iw, _iw, _iw] |
| 273 | }) |
| 274 | _x += (_iw * 1.25) |
| 275 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 276 | ctx.fillText(vTexts[i], _x, _y) |
| 277 | _x += ctx.measureText(vTexts[i]).width |
| 278 | _x += vGap |
| 279 | } |
| 280 | } |
| 281 | } |
| 282 | |
| 283 | async function drawPieChart(title, chartData, legend, anchor, canvas, ctx) { |
| 284 | if (title == '') { |
| 285 | title = chartData.series[0].text.data[0] |
| 286 | } |
| 287 | if (title) { |
| 288 | ctx.font = `${Math.min(anchor[3] * 0.07, 18.5)}px 等线` |
| 289 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 290 | let textWidth = ctx.measureText(title).width |
| 291 | ctx.fillText(title, anchor[0] + anchor[2] / 2 - textWidth / 2, anchor[1] + anchor[3] * 0.06) |
| 292 | } |
| 293 | let extInfo = chartData.extInfo |
| 294 | let holeSize = +(extInfo.holeSize || 0) / 100 |
| 295 | let series = chartData.series |
| 296 | let values = series[0].value.data |
| 297 | let dataPoints = series[0].dataPoint |
| 298 | let totalValue = 0 |
| 299 | for (let i = 0; i < values.length; i++) { |
| 300 | totalValue += (+values[i]) |
| 301 | } |
| 302 | let xGap = anchor[2] * 0.05 // 开始间距 |
| 303 | let x = anchor[0] + xGap |
| 304 | let xWidth = anchor[2] - xGap * 2 |
| 305 | let startY = title ? anchor[3] * 0.12 : anchor[3] * 0.05 |
| 306 | let y = anchor[1] + startY |
| 307 | let yHeight = anchor[3] - startY - anchor[3] * 0.15 |
| 308 | let centerX = xWidth / 2 |
| 309 | let centerY = yHeight / 2 |
| 310 | let radius = Math.min(centerX, centerY) |
| 311 | ctx.lineWidth = 0.5 |
| 312 | ctx.font = `${Math.min(anchor[2] * 0.048, 14)}px 等线` |
| 313 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 314 | ctx.save() |
| 315 | ctx.translate(x + centerX, y + centerY) |
| 316 | // arc 是以3点钟方向开始，反向旋转-90调整到0点开始 |
| 317 | ctx.rotate(-90 * Math.PI / 180) |
| 318 | ctx.translate(-x - centerX, -y - centerY) |
| 319 | let startAngle = 0 |
| 320 | if (extInfo.startAngle) { |
| 321 | startAngle = extInfo.startAngle * (Math.PI / 180) |
| 322 | } |
| 323 | for (let i = 0; i < values.length; i++) { |
| 324 | let property = dataPoints[i].property |
| 325 | ctx.fillStyle = await toCtxPaint(ctx, property.fillStyle, property.anchor || anchor) |
| 326 | if (property.strokeStyle) { |
| 327 | ctx.lineWidth = property.strokeStyle.lineWidth || 1.5 |
| 328 | let lineCap = property.strokeStyle.lineCap |
| 329 | if (!lineCap || lineCap == 'FLAT') { |
| 330 | lineCap = 'butt' |
| 331 | } |
| 332 | ctx.lineCap = lineCap.toLowerCase() |
| 333 | ctx.strokeStyle = await toCtxPaint(ctx, property.strokeStyle.paint, property.anchor || anchor) |
| 334 | } |
| 335 | let sliceAngle = (2 * Math.PI * values[i]) / totalValue |
| 336 | ctx.beginPath() |
| 337 | ctx.moveTo(x + centerX, y + centerY) |
| 338 | // 实心圆 |
| 339 | ctx.arc(x + centerX, y + centerY, radius, startAngle, startAngle + sliceAngle, false) |
| 340 | if (holeSize > 0) { |
| 341 | // 空心圆 |
| 342 | let holeRadius = radius * holeSize |
| 343 | ctx.arc(x + centerX, y + centerY, holeRadius, startAngle + sliceAngle, startAngle, true) |
| 344 | ctx.closePath() |
| 345 | ctx.save() |
| 346 | ctx.clip() |
| 347 | ctx.fill() |
| 348 | ctx.stroke() |
| 349 | ctx.restore() |
| 350 | } else { |
| 351 | ctx.closePath() |
| 352 | ctx.fill() |
| 353 | ctx.stroke() |
| 354 | } |
| 355 | startAngle += sliceAngle |
| 356 | } |
| 357 | ctx.restore() |
| 358 | if (legend) { |
| 359 | // 绘制类目标签标识 |
| 360 | let vTexts = [] |
| 361 | let vTextWidth = 0 |
| 362 | let categorys = series[0].category.data |
| 363 | for (let i = 0; i < categorys.length; i++) { |
| 364 | let s = categorys[i] |
| 365 | vTexts.push(s) |
| 366 | vTextWidth += ctx.measureText(s).width |
| 367 | } |
| 368 | let vGap = anchor[2] * 0.03 |
| 369 | let _iw = Math.min(anchor[2] * 0.028, 15) |
| 370 | let _y = y + yHeight + anchor[3] * 0.125 |
| 371 | let _x = x + xWidth / 2 - (vTextWidth + vGap * (vTexts.length - 1) + (_iw * 1.25) * vTexts.length) / 2 |
| 372 | for (let i = 0; i < vTexts.length; i++) { |
| 373 | let property = dataPoints[i].property |
| 374 | await drawRect(ctx, { |
| 375 | fillStyle: property.fillStyle, |
| 376 | strokeStyle: property.strokeStyle, |
| 377 | anchor: [_x, _y - _iw, _iw, _iw] |
| 378 | }) |
| 379 | _x += (_iw * 1.25) |
| 380 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 381 | ctx.fillText(vTexts[i], _x, _y) |
| 382 | _x += ctx.measureText(vTexts[i]).width |
| 383 | _x += vGap |
| 384 | } |
| 385 | } |
| 386 | } |
| 387 | |
| 388 | async function drawLineChart(title, chartData, legend, anchor, canvas, ctx) { |
| 389 | if (title) { |
| 390 | ctx.font = `${Math.min(anchor[3] * 0.07, 18.5)}px 等线` |
| 391 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 392 | let textWidth = ctx.measureText(title).width |
| 393 | ctx.fillText(title, anchor[0] + anchor[2] / 2 - textWidth / 2, anchor[1] + anchor[3] * 0.06) |
| 394 | } |
| 395 | let extInfo = chartData.extInfo |
| 396 | let smooth = extInfo.smooth == 'true' |
| 397 | let series = chartData.series |
| 398 | let categoryAxis = chartData.categoryAxis |
| 399 | let valueAxes = chartData.valueAxes && chartData.valueAxes.length > 0 ? chartData.valueAxes[0] : null |
| 400 | let minValue = 0, maxValue = 0 |
| 401 | for (let i = 0; i < series.length; i++) { |
| 402 | minValue = Math.min(minValue, ...series[i].value.data) |
| 403 | maxValue = Math.max(maxValue, ...series[i].value.data) |
| 404 | } |
| 405 | ctx.lineWidth = 0.5 |
| 406 | ctx.font = `${Math.min(anchor[3] * 0.06, 14)}px 等线` |
| 407 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 408 | ctx.strokeStyle = 'rgb(217, 217, 217)' |
| 409 | let ticks = calculateTicks(minValue, maxValue, 5, 10) |
| 410 | let xGap = ctx.measureText(ticks[ticks.length - 1] + '00').width |
| 411 | let x = anchor[0] + xGap |
| 412 | let xWidth = anchor[2] - xGap * 1.5 |
| 413 | let startY = title ? anchor[3] * 0.12 : anchor[3] * 0.05 |
| 414 | let y = anchor[1] + startY |
| 415 | let yHeight = anchor[3] - startY - anchor[3] * 0.15 |
| 416 | let yGap = yHeight / (ticks.length - 1) |
| 417 | ctx.beginPath() |
| 418 | for (let i = 0; i < ticks.length; i++) { |
| 419 | // y轴数值 |
| 420 | if (valueAxes && !valueAxes.deleted) { |
| 421 | ctx.textAlign = 'right' |
| 422 | let v = ticks[ticks.length - 1 - i] |
| 423 | let vs = v.toString() |
| 424 | if (vs.indexOf('.') > -1 && vs.split('.')[1].length > 1) { |
| 425 | vs = v.toFixed(1) |
| 426 | } |
| 427 | ctx.fillText(vs, x - 4, y + 6) |
| 428 | ctx.textAlign = 'start' |
| 429 | } |
| 430 | if (extInfo.majorGridlines == 'true') { |
| 431 | // 网格线 |
| 432 | ctx.moveTo(x, y) |
| 433 | ctx.lineTo(x + xWidth, y) |
| 434 | } |
| 435 | y += yGap |
| 436 | } |
| 437 | ctx.stroke() |
| 438 | x += xGap |
| 439 | y -= yGap |
| 440 | let catGap = anchor[2] * 0.05 // 类目间距 |
| 441 | let categorys = series[0].category.data |
| 442 | let categoryWidth = (xWidth - catGap * (categorys.length - 1) - xGap * 1.5) / categorys.length |
| 443 | let cxList = [] |
| 444 | // 绘制类目 |
| 445 | for (let i = 0; i < categorys.length; i++) { |
| 446 | let _cx = (categoryWidth + catGap) * i + categoryWidth / 2 - ctx.measureText(categorys[i]).width / 2 |
| 447 | cxList.push(_cx) |
| 448 | if (categoryAxis && !categoryAxis.deleted) { |
| 449 | ctx.textAlign = 'center' |
| 450 | ctx.fillText(categorys[i], x + _cx, y + anchor[3] * 0.05) |
| 451 | ctx.textAlign = 'start' |
| 452 | } |
| 453 | } |
| 454 | // 绘制折线 |
| 455 | for (let i = 0; i < series.length; i++) { |
| 456 | let property = series[i].property |
| 457 | if (property.strokeStyle) { |
| 458 | ctx.lineWidth = property.strokeStyle.lineWidth || 1.5 |
| 459 | let lineCap = property.strokeStyle.lineCap |
| 460 | if (!lineCap || lineCap == 'FLAT') { |
| 461 | lineCap = 'butt' |
| 462 | } |
| 463 | ctx.lineCap = lineCap.toLowerCase() |
| 464 | ctx.strokeStyle = await toCtxPaint(ctx, property.strokeStyle.paint, property.anchor) |
| 465 | } |
| 466 | ctx.beginPath() |
| 467 | let points = [] |
| 468 | for (let j = 0; j < categorys.length; j++) { |
| 469 | let vHeight = (series[i].value.data[j] / ticks[ticks.length - 1]) * yHeight |
| 470 | let _x = x + cxList[j] |
| 471 | let _y = y - vHeight |
| 472 | if (j == 0) { |
| 473 | ctx.moveTo(_x, _y) |
| 474 | } else if (smooth) { |
| 475 | points.push({ x: _x, y: _y }) |
| 476 | } else { |
| 477 | ctx.lineTo(_x, _y) |
| 478 | } |
| 479 | } |
| 480 | if (smooth) { |
| 481 | let j = 0 |
| 482 | for (; j < points.length - 2; j++) { |
| 483 | let xc = (points[j].x + points[j + 1].x) / 2 |
| 484 | let yc = (points[j].y + points[j + 1].y) / 2 |
| 485 | ctx.quadraticCurveTo(points[j].x, points[j].y, xc, yc) |
| 486 | } |
| 487 | ctx.quadraticCurveTo(points[j].x, points[j].y, points[j + 1].x, points[j + 1].y) |
| 488 | } |
| 489 | ctx.stroke() |
| 490 | } |
| 491 | if (legend) { |
| 492 | // 绘制v标签标识 |
| 493 | x = anchor[0] + xGap |
| 494 | let vTexts = [] |
| 495 | let vTextWidth = 0 |
| 496 | for (let i = 0; i < series.length; i++) { |
| 497 | let s = series[i].text.data[0] |
| 498 | vTexts.push(s) |
| 499 | vTextWidth += ctx.measureText(s).width |
| 500 | } |
| 501 | let vGap = anchor[2] * 0.02 |
| 502 | let _iw = anchor[2] * 0.04 |
| 503 | let _y = y + anchor[3] * 0.128 |
| 504 | let _x = x + xWidth / 2 - (vTextWidth + vGap * (vTexts.length - 1) + (_iw + 2) * vTexts.length) / 2 |
| 505 | for (let i = 0; i < vTexts.length; i++) { |
| 506 | let property = series[i].property |
| 507 | if (property.strokeStyle) { |
| 508 | ctx.lineWidth = property.strokeStyle.lineWidth || 1.5 |
| 509 | let lineCap = property.strokeStyle.lineCap |
| 510 | if (!lineCap || lineCap == 'FLAT') { |
| 511 | lineCap = 'butt' |
| 512 | } |
| 513 | ctx.lineCap = lineCap.toLowerCase() |
| 514 | ctx.strokeStyle = await toCtxPaint(ctx, property.strokeStyle.paint, property.anchor) |
| 515 | } |
| 516 | ctx.beginPath() |
| 517 | ctx.moveTo(_x, _y - 4) |
| 518 | ctx.lineTo(_x + _iw, _y - 4) |
| 519 | ctx.stroke() |
| 520 | _x += (_iw + 2) |
| 521 | ctx.fillStyle = 'rgb(89, 89, 89)' |
| 522 | ctx.fillText(vTexts[i], _x, _y) |
| 523 | _x += ctx.measureText(vTexts[i]).width |
| 524 | _x += vGap |
| 525 | } |
| 526 | } |
| 527 | } |
| 528 | |
| 529 | function calculateTicks(minValue, maxValue, minTicks, maxTicks) { |
| 530 | let range = maxValue - minValue |
| 531 | let rawInterval = range / (minTicks - 1) |
| 532 | let magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval))) |
| 533 | let normalizedInterval = rawInterval / magnitude |
| 534 | let adjustedInterval |
| 535 | if (normalizedInterval <= 1.5) { |
| 536 | adjustedInterval = 1 |
| 537 | } else if (normalizedInterval <= 3) { |
| 538 | adjustedInterval = 2 |
| 539 | } else if (normalizedInterval <= 7) { |
| 540 | adjustedInterval = 5 |
| 541 | } else { |
| 542 | adjustedInterval = 10 |
| 543 | } |
| 544 | adjustedInterval *= magnitude |
| 545 | let tickEnd = Math.ceil(maxValue / adjustedInterval) * adjustedInterval |
| 546 | let ticks = [] |
| 547 | for (let tick = 0; tick <= tickEnd; tick += adjustedInterval) { |
| 548 | ticks.push(tick) |
| 549 | } |
| 550 | if (ticks.length < minTicks) { |
| 551 | for (let i = ticks.length; i < minTicks; i++) { |
| 552 | ticks.push(i * adjustedInterval) |
| 553 | } |
| 554 | } else { |
| 555 | while (ticks.length > maxTicks) { |
| 556 | adjustedInterval *= 2 |
| 557 | ticks = [] |
| 558 | tickEnd = Math.ceil(maxValue / adjustedInterval) * adjustedInterval |
| 559 | for (let tick = 0; tick <= tickEnd; tick += adjustedInterval) { |
| 560 | ticks.push(tick) |
| 561 | } |
| 562 | } |
| 563 | } |
| 564 | return ticks |
| 565 | } |
| 566 | |
| 567 | async function drawRect(ctx, property) { |
| 568 | ctx.fillStyle = await toCtxPaint(ctx, property.fillStyle, property.anchor) |
| 569 | if (property.strokeStyle) { |
| 570 | ctx.lineWidth = property.strokeStyle.lineWidth || 1 |
| 571 | ctx.strokeStyle = await toCtxPaint(ctx, property.strokeStyle.paint, property.anchor) |
| 572 | } |
| 573 | ctx.fillRect(property.anchor[0], property.anchor[1], property.anchor[2], property.anchor[3]) |
| 574 | } |
| 575 | |
| 576 | function toCtxPaint(ctx, paint, anchor, isBackground, defaultColor) { |
| 577 | // eslint-disable-next-line @typescript-eslint/no-unused-vars |
| 578 | return new Promise((resolve, reject) => { |
| 579 | if (!paint) { |
| 580 | resolve(defaultColor || 'transparent') |
| 581 | } else if (paint.type == 'noFill') { |
| 582 | // 无填充 |
| 583 | resolve('transparent') |
| 584 | } else if (paint.type == 'color') { |
| 585 | // 颜色 |
| 586 | resolve(toColor(paint.color, defaultColor)) |
| 587 | } else if (paint.type == 'bgFill') { |
| 588 | // 背景填充 |
| 589 | resolve(ctx.bgFillStyle || defaultColor || 'transparent') |
| 590 | } else if (paint.type == 'groupFill') { |
| 591 | // 组合背景 |
| 592 | let groupFillStyle = paint.parentGroupFillStyle || ctx.groupFillStyle |
| 593 | if (groupFillStyle) { |
| 594 | toCtxPaint(ctx, groupFillStyle, anchor || groupFillStyle.groupAnchor, false, defaultColor).then(res => { |
| 595 | resolve(res) |
| 596 | }) |
| 597 | } else { |
| 598 | resolve(defaultColor || 'transparent') |
| 599 | } |
| 600 | } else if (paint.type == 'gradient') { |
| 601 | // 渐变 |
| 602 | let gradient = paint.gradient |
| 603 | let x = anchor[0], y = anchor[1], width = anchor[2], height = anchor[3] |
| 604 | let centerX = x + width / 2 |
| 605 | let centerY = y + height / 2 |
| 606 | let gradientObj |
| 607 | // linear,circular,rectangular,shape |
| 608 | if (gradient.gradientType == 'circular') { |
| 609 | // 射线 |
| 610 | let radius = Math.sqrt(width * width + height * height) * (gradient.insets[1] == 0.5 ? 0.5 : 1) |
| 611 | let cx = centerX + width * (gradient.insets[1] - gradient.insets[3]) / 2 |
| 612 | let cy = centerY + height * (gradient.insets[0] - gradient.insets[2]) / 2 |
| 613 | gradientObj = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius) |
| 614 | } else { |
| 615 | // 线性 |
| 616 | let startX = x |
| 617 | let startY = centerY |
| 618 | let endX = x + width |
| 619 | let endY = centerY |
| 620 | if (gradient.angle) { |
| 621 | let radians = gradient.angle * Math.PI / 180 |
| 622 | let midX = (startX + endX) / 2 |
| 623 | let midY = (startY + endY) / 2 |
| 624 | let newStartX = midX + (startX - midX) * Math.cos(radians) - (startY - midY) * Math.sin(radians) |
| 625 | let newStartY = midY + (startX - midX) * Math.sin(radians) + (startY - midY) * Math.cos(radians) |
| 626 | let newEndX = midX + (endX - midX) * Math.cos(radians) - (endY - midY) * Math.sin(radians) |
| 627 | let newEndY = midY + (endX - midX) * Math.sin(radians) + (endY - midY) * Math.cos(radians) |
| 628 | startX = newStartX |
| 629 | startY = newStartY |
| 630 | endX = newEndX |
| 631 | endY = newEndY |
| 632 | } |
| 633 | gradientObj = ctx.createLinearGradient(startX, startY, endX, endY) |
| 634 | } |
| 635 | for (let i = 0; i < gradient.colors.length; i++) { |
| 636 | let color = gradient.colors[i] |
| 637 | gradientObj.addColorStop(gradient.fractions[i], toColor(color)) |
| 638 | } |
| 639 | resolve(gradientObj) |
| 640 | } else if (anchor && anchor[2] == 0 && anchor[3] == 0) { |
| 641 | resolve('transparent') |
| 642 | } else if (paint.type == 'texture') { |
| 643 | // 图片或纹理 |
| 644 | let texture = paint.texture |
| 645 | loadChartImage(texture.imageData).then(img => { |
| 646 | let pat = createCtxTexturePattern(ctx, img, texture, anchor) |
| 647 | resolve(pat) |
| 648 | }) |
| 649 | } else if (paint.type == 'pattern') { |
| 650 | // 图案 |
| 651 | let pattern = paint.pattern |
| 652 | // let prst = pattern.prst |
| 653 | let fgColor = pattern.fgColor.realColor |
| 654 | let bgColor = pattern.bgColor.realColor |
| 655 | let width = anchor[2], height = anchor[3] |
| 656 | let imgCanvas = document.createElement('canvas') |
| 657 | imgCanvas.width = width |
| 658 | imgCanvas.height = height |
| 659 | let imgCtx = imgCanvas.getContext('2d') |
| 660 | imgCtx.imageSmoothingEnabled = true |
| 661 | imgCtx.imageSmoothingQuality = 'high' |
| 662 | let imgData = imgCtx.createImageData(width, height) |
| 663 | let line = 0 |
| 664 | for (let i = 0; i < imgData.data.length; i += 4) { |
| 665 | if (++line % 16 == 0) { |
| 666 | // 前景 |
| 667 | imgData.data[i + 0] = (fgColor >> 16) & 255 |
| 668 | imgData.data[i + 1] = (fgColor >> 8) & 255 |
| 669 | imgData.data[i + 2] = (fgColor >> 0) & 255 |
| 670 | imgData.data[i + 3] = (fgColor >> 24) & 255 |
| 671 | } else { |
| 672 | // 背景 |
| 673 | imgData.data[i + 0] = (bgColor >> 16) & 255 |
| 674 | imgData.data[i + 1] = (bgColor >> 8) & 255 |
| 675 | imgData.data[i + 2] = (bgColor >> 0) & 255 |
| 676 | imgData.data[i + 3] = (bgColor >> 24) & 255 |
| 677 | } |
| 678 | if (i % 400 == 0) { |
| 679 | line += 2 |
| 680 | } |
| 681 | } |
| 682 | imgCtx.putImageData(imgData, 0, 0) |
| 683 | let imgSrc = imgCanvas.toDataURL() |
| 684 | let image = new Image() |
| 685 | image.src = imgSrc |
| 686 | image.onload = async function() { |
| 687 | resolve(ctx.createPattern(image, 'no-repeat')) |
| 688 | } |
| 689 | } |
| 690 | }) |
| 691 | } |
| 692 | |
| 693 | function createCtxTexturePattern(ctx, img, texture, anchor) { |
| 694 | let width = anchor[2] |
| 695 | let height = anchor[3] |
| 696 | let mode = texture.alignment || !texture.stretch ? 'repeat' : 'no-repeat' |
| 697 | if (width < 1 && height < 1 || isNaN(width) || isNaN(height)) { |
| 698 | return ctx.createPattern(img, mode) |
| 699 | } |
| 700 | if (texture.alignment || !texture.stretch) { |
| 701 | width = img.width |
| 702 | height = img.height |
| 703 | } |
| 704 | let patternCanvas = document.createElement('canvas') |
| 705 | patternCanvas.width = Math.max(1, width) |
| 706 | patternCanvas.height = Math.max(1, height) |
| 707 | let patternCtx = patternCanvas.getContext('2d') |
| 708 | patternCtx.imageSmoothingEnabled = true |
| 709 | patternCtx.imageSmoothingQuality = 'high' |
| 710 | if (texture.alpha >= 0 && texture.alpha < 100000) { |
| 711 | patternCtx.globalAlpha = texture.alpha / 100000 |
| 712 | } |
| 713 | let imgInsets = null |
| 714 | if (texture.insets) { |
| 715 | let top = texture.insets[0] / 100000 |
| 716 | let left = texture.insets[1] / 100000 |
| 717 | let bottom = texture.insets[2] / 100000 |
| 718 | let right = texture.insets[3] / 100000 |
| 719 | let x = img.width * left |
| 720 | let y = img.height * top |
| 721 | let w = img.width * (1 - left - right) |
| 722 | let h = img.height * (1 - top - bottom) |
| 723 | imgInsets = [x, y, w, h] |
| 724 | } |
| 725 | if (texture.stretch) { |
| 726 | let top = texture.stretch[0] / 100000 |
| 727 | let left = texture.stretch[1] / 100000 |
| 728 | let bottom = texture.stretch[2] / 100000 |
| 729 | let right = texture.stretch[3] / 100000 |
| 730 | let x = width * left |
| 731 | let y = height * top |
| 732 | let w = width * (1 - left - right) |
| 733 | let h = height * (1 - top - bottom) |
| 734 | if (imgInsets) { |
| 735 | patternCtx.drawImage(img, imgInsets[0], imgInsets[1], imgInsets[2], imgInsets[3], x, y, w, h) |
| 736 | } else { |
| 737 | patternCtx.drawImage(img, x, y, w, h) |
| 738 | } |
| 739 | } else if (texture.alignment) { |
| 740 | let x = 0, y = 0 |
| 741 | if (texture.alignment == 'CENTER') { |
| 742 | if (width > anchor[2]) { |
| 743 | x = (width - anchor[2]) / 2 |
| 744 | } |
| 745 | if (height > anchor[3]) { |
| 746 | y = (height - anchor[3]) / 2 |
| 747 | } |
| 748 | } |
| 749 | patternCtx.drawImage(img, x, y, width, height, 0, 0, width, height) |
| 750 | } else { |
| 751 | if (imgInsets) { |
| 752 | patternCtx.drawImage(img, imgInsets[0], imgInsets[1], imgInsets[2], imgInsets[3], 0, 0, width, height) |
| 753 | } else { |
| 754 | patternCtx.drawImage(img, 0, 0, width, height) |
| 755 | } |
| 756 | } |
| 757 | if (texture.duoTone && texture.duoTone.length > 0 && texture.duoTonePrst) { |
| 758 | // 重新着色 |
| 759 | let color = texture.duoTone[0].realColor |
| 760 | let r = (color >> 16) & 255 |
| 761 | let g = (color >> 8) & 255 |
| 762 | let b = (color >> 0) & 255 |
| 763 | let imageData = patternCtx.getImageData(0, 0, patternCanvas.width, patternCanvas.height) |
| 764 | let data = imageData.data |
| 765 | for(var i = 0; i < data.length; i += 4) { |
| 766 | let gray = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) / 255 |
| 767 | // black / white |
| 768 | let prst = texture.duoTonePrst == 'white' ? 255 : 0 |
| 769 | data[i] = gray * r + (1 - gray) * prst |
| 770 | data[i + 1] = gray * g + (1 - gray) * prst |
| 771 | data[i + 2] = gray * b + (1 - gray) * prst |
| 772 | } |
| 773 | patternCtx.putImageData(imageData, 0, 0) |
| 774 | } |
| 775 | return ctx.createPattern(patternCanvas, mode) |
| 776 | } |
| 777 | |
| 778 | function toColor(colorObj, defaultColor) { |
| 779 | if (colorObj == null || (colorObj.color == null && colorObj.realColor == null)) { |
| 780 | return defaultColor || 'transparent' |
| 781 | } |
| 782 | let color = colorObj.realColor != null ? colorObj.realColor : colorObj.color |
| 783 | let r = (color >> 16) & 255 |
| 784 | let g = (color >> 8) & 255 |
| 785 | let b = (color >> 0) & 255 |
| 786 | let a = ((color >> 24) & 255) / 255 |
| 787 | if (colorObj.realColor == null) { |
| 788 | if (colorObj.alpha != null && colorObj.alpha != -1) { |
| 789 | if (colorObj.alpha > 1000) { |
| 790 | a = colorObj.alpha / 100000 |
| 791 | } else { |
| 792 | a = (colorObj.alpha > 0 && colorObj.alpha < 1) ? colorObj.alpha : colorObj.alpha / 255 |
| 793 | } |
| 794 | a = Math.min(1, Math.max(0, a)) |
| 795 | } |
| 796 | if (colorObj.lumMod && colorObj.lumMod > 0) { |
| 797 | let value = colorObj.lumMod / 100000 |
| 798 | r = r * value |
| 799 | g = g * value |
| 800 | b = b * value |
| 801 | } |
| 802 | if (colorObj.lumOff && colorObj.lumOff > 0) { |
| 803 | let value = colorObj.lumOff / 100000 |
| 804 | r += 255 * value |
| 805 | g += 255 * value |
| 806 | b += 255 * value |
| 807 | } |
| 808 | } |
| 809 | return `rgba(${r}, ${g}, ${b}, ${a})` |
| 810 | } |
| 811 | |
| 812 | function loadChartImage(src) { |
| 813 | return new Promise(resolve => { |
| 814 | if (!src) { |
| 815 | resolve() |
| 816 | return |
| 817 | } |
| 818 | let img = new Image() |
| 819 | let eqOrigin = src.startsWith('data:') || src.startsWith(document.location.origin) || (src.startsWith('//') && (document.location.protocol + src).startsWith(document.location.origin)) |
| 820 | if (!eqOrigin) { |
| 821 | img.crossOrigin = 'anonymous' |
| 822 | } |
| 823 | img.src = src |
| 824 | img.onload = function() { |
| 825 | resolve(img) |
| 826 | } |
| 827 | img.onerror = function (e) { |
| 828 | resolve() |
| 829 | console.log('图片加载失败: ', src, e) |
| 830 | } |
| 831 | }) |
| 832 | } |
| 833 | |
| 834 | // export { drawChart } |