From 2d41c169a2ae5a844e03675a301345883dae357a Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期六, 16 十二月 2023 16:28:42 +0800
Subject: [PATCH] #
---
Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js | 719 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 545 insertions(+), 174 deletions(-)
diff --git a/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js b/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
index b3dfa73..f78bde5 100644
--- a/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
+++ b/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
@@ -19,12 +19,10 @@
'use strict';
var config = {
- version: 'v2.4.4-20221102',
+ version: 'v2.5.0-20230101',
yAxisWidth: 15,
xAxisHeight: 22,
- xAxisTextPadding: 3,
padding: [10, 10, 10, 10],
- pixelRatio: 1,
rotate: false,
fontSize: 13,
fontColor: '#666666',
@@ -35,10 +33,6 @@
pieChartTextPadding: 5,
titleFontSize: 20,
subtitleFontSize: 15,
- toolTipPadding: 3,
- toolTipBackground: '#000000',
- toolTipOpacity: 0.7,
- toolTipLineHeight: 20,
radarLabelTextMargin: 13,
};
@@ -545,6 +539,7 @@
seriesItem.style = item.style;
seriesItem.pointShape = item.pointShape;
seriesItem.disableLegend = item.disableLegend;
+ seriesItem.legendShape = item.legendShape;
seriesItem.name = item.name;
seriesItem.show = item.show;
seriesItem.data = item.formatter ? item.formatter(item.data[tmpindex]) : item.data[tmpindex];
@@ -597,7 +592,8 @@
};
return {
text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
- color: item.color
+ color: item.color,
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
});
var offset = {
@@ -617,7 +613,8 @@
return {
text: option.formatter ? option.formatter(item, categories[index], index, opts) : item.name + ': ' + item.data,
color: item.color,
- disableLegend: item.disableLegend ? true : false
+ disableLegend: item.disableLegend ? true : false,
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
});
textList = textList.filter(function(item) {
@@ -666,19 +663,23 @@
}
let text1 = {
text: '寮�鐩橈細' + item.data[0],
- color: color[0]
+ color: color[0],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text2 = {
text: '鏀剁洏锛�' + item.data[1],
- color: color[1]
+ color: color[1],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text3 = {
text: '鏈�浣庯細' + item.data[2],
- color: color[2]
+ color: color[2],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text4 = {
text: '鏈�楂橈細' + item.data[3],
- color: color[3]
+ color: color[3],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
textList.push(text1, text2, text3, text4);
});
@@ -1102,23 +1103,22 @@
function calCategoriesData(categories, opts, config, eachSpacing, context) {
var result = {
angle: 0,
- xAxisHeight: config.xAxisHeight
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
};
- var fontSize = opts.xAxis.fontSize * opts.pix || config.fontSize;
+ var fontSize = opts.xAxis.fontSize * opts.pix;
var categoriesTextLenth = categories.map(function(item,index) {
var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item,index,opts) : item;
return measureText(String(xitem), fontSize, context);
});
-
var maxTextLength = Math.max.apply(this, categoriesTextLenth);
if (opts.xAxis.rotateLabel == true) {
result.angle = opts.xAxis.rotateAngle * Math.PI / 180;
- let tempHeight = 2 * config.xAxisTextPadding + Math.abs(maxTextLength * Math.sin(result.angle))
- tempHeight = tempHeight < fontSize + 2 * config.xAxisTextPadding ? tempHeight + 2 * config.xAxisTextPadding : tempHeight;
- if(opts.enableScroll == true && opts.xAxis.scrollShow == true){
- tempHeight += 12 * opts.pix;
- }
+ let tempHeight = opts.xAxis.marginTop * opts.pix * 2 + Math.abs(maxTextLength * Math.sin(result.angle))
+ tempHeight = tempHeight < fontSize + opts.xAxis.marginTop * opts.pix * 2 ? tempHeight + opts.xAxis.marginTop * opts.pix * 2 : tempHeight;
result.xAxisHeight = tempHeight;
+ }
+ if (opts.enableScroll && opts.xAxis.scrollShow) {
+ result.xAxisHeight += 6 * opts.pix;
}
if (opts.xAxis.disabled){
result.xAxisHeight = 0;
@@ -1210,7 +1210,7 @@
}, opts.extra.bar);
var result = {
angle: 0,
- xAxisHeight: config.xAxisHeight
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
};
result.ranges = getXAxisTextList(series, opts, config, columnstyle.type);
result.rangesFormat = result.ranges.map(function(item) {
@@ -1229,15 +1229,8 @@
// 璁＄畻X杞村埢搴︾殑灞炴�ц濡傛瘡涓埢搴︾殑闂撮殧,鍒诲害鐨勮捣濮嬬偣\缁撴潫鐐逛互鍙婃�婚暱
var eachSpacing = result.eachSpacing;
var textLength = xAxisScaleValues.map(function(item) {
- return measureText(item, opts.xAxis.fontSize * opts.pix || config.fontSize, context);
+ return measureText(item, opts.xAxis.fontSize * opts.pix, context);
});
- // get max length of categories text
- var maxTextLength = Math.max.apply(this, textLength);
- // 濡傛灉鍒诲害鍊兼枃鏈唴瀹硅繃闀�,鍒欏皢鍏堕�嗘椂閽堟棆杞�45掳
- if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
- result.angle = 45 * Math.PI / 180;
- result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
- }
if (opts.xAxis.disabled === true) {
result.xAxisHeight = 0;
}
@@ -1415,7 +1408,12 @@
}
function getGaugeAxisPoints(categories, startAngle, endAngle) {
- let totalAngle = startAngle - endAngle + 1;
+ let totalAngle;
+ if (endAngle < startAngle) {
+ totalAngle = 2 + endAngle - startAngle;
+ } else {
+ totalAngle = startAngle - endAngle;
+ }
let tempStartAngle = startAngle;
for (let i = 0; i < categories.length; i++) {
categories[i].value = categories[i].value === null ? 0 : categories[i].value;
@@ -1444,7 +1442,12 @@
} else {
item.color = gaugeOption.pointer.color;
}
- let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ let totalAngle;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle;
item._oldAngle_ = gaugeOption.oldAngle;
if (gaugeOption.oldAngle < gaugeOption.endAngle) {
@@ -1681,8 +1684,91 @@
return points;
}
-function getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption) {
- var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
+function getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process){
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
+ var boundaryGap = opts.xAxis.boundaryGap;
+ var points = [];
+ var validHeight = opts.height - opts.area[0] - opts.area[2];
+ var validWidth = opts.width - opts.area[1] - opts.area[3];
+ data.forEach(function(item, index) {
+ if (item === null) {
+ points.push(null);
+ } else {
+ var point = {};
+ point.color = item.color;
+ if(lineOption.animation == 'vertical'){
+ point.x = xAxisPoints[index];
+ var value = item;
+ if (typeof item === 'object' && item !== null) {
+ if (item.constructor.toString().indexOf('Array') > -1) {
+ let xranges, xminRange, xmaxRange;
+ xranges = [].concat(opts.chartData.xAxisData.ranges);
+ xminRange = xranges.shift();
+ xmaxRange = xranges.pop();
+ value = item[1];
+ point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
+ } else {
+ value = item.value;
+ }
+ }
+ if (boundaryGap == 'center') {
+ point.x += eachSpacing / 2;
+ }
+ var height = validHeight * (value - minRange) / (maxRange - minRange);
+ height *= process;
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }else{
+ point.x = xAxisPoints[0] + eachSpacing * index * process;
+ var value = item;
+ if (boundaryGap == 'center') {
+ point.x += eachSpacing / 2;
+ }
+ var height = validHeight * (value - minRange) / (maxRange - minRange);
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }
+ }
+ });
+ return points;
+}
+
+function getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process){
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
+ var points = [];
+ var validHeight = opts.height - opts.area[0] - opts.area[2];
+ var validWidth = opts.width - opts.area[1] - opts.area[3];
+ data.forEach(function(item, index) {
+ if (item === null) {
+ points.push(null);
+ } else {
+ var point = {};
+ point.color = item.color;
+ point.x = xAxisPoints[index];
+ var value = item;
+ if (typeof item === 'object' && item !== null) {
+ if (item.constructor.toString().indexOf('Array') > -1) {
+ let xranges, xminRange, xmaxRange;
+ xranges = [].concat(opts.chartData.xAxisData.ranges);
+ xminRange = xranges.shift();
+ xmaxRange = xranges.pop();
+ value = item[1];
+ point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
+ } else {
+ value = item.value;
+ }
+ }
+ point.x += eachSpacing / 2;
+ var height = validHeight * (value * process - minRange) / (maxRange - minRange);
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }
+ });
+ return points;
+}
+
+function getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints) {
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
var points = [];
var validHeight = opts.height - opts.area[0] - opts.area[2];
var validWidth = opts.width - opts.area[1] - opts.area[3];
@@ -1696,8 +1782,7 @@
point.x = xAxisPoints[index];
point.x += eachSpacing / 2;
var value = item.data;
- var height = validHeight * (value - minRange) / (maxRange - minRange);
- height *= process;
+ var height = validHeight * (value * process - minRange) / (maxRange - minRange);
point.y = opts.height - height - opts.area[2];
point.value = value;
point.width = mountWidth;
@@ -1936,14 +2021,26 @@
var yAxisWidthArr = new Array(1);
if(opts.type === 'bar'){
rangesArr[0] = opts.categories;
+ if(!opts.yAxis.formatter){
+ opts.yAxis.formatter = (val,index,opts) => {return val + (opts.yAxis.unit || '')}
+ }
}else{
+ if(!opts.yAxis.formatter){
+ opts.yAxis.formatter = (val,index,opts) => {return val.toFixed(opts.yAxis.tofix ) + (opts.yAxis.unit || '')}
+ }
rangesArr[0] = getYAxisTextList(series, opts, config, columnstyle.type, {});
}
yAxisWidthArr[0] = {
position: 'left',
width: 0
};
-
+ var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize;
+ rangesFormatArr[0] = rangesArr[0].map(function(item,index) {
+ item = opts.yAxis.formatter(item,index,opts);
+ yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5);
+ return item;
+ });
+ yAxisWidthArr[0].width += 3 * opts.pix;
if (opts.yAxis.disabled === true) {
yAxisWidthArr[0] = {
position: 'left',
@@ -1958,20 +2055,13 @@
position: 'left',
max: opts.yAxis.max,
min: opts.yAxis.min,
- formatter: (val,index,opts) => {return val}
+ formatter: opts.yAxis.formatter
};
if(opts.type === 'bar'){
opts.yAxis.data[0].categories = opts.categories;
opts.yAxis.data[0].type = 'categories';
}
}
- var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize;
- rangesFormatArr[0] = rangesArr[0].map(function(item,index) {
- item = opts.yAxis.data[0].formatter(item,index,opts);
- yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5);
- return item;
- });
- yAxisWidthArr[0].width += 3 * opts.pix;
}
return {
rangesFormat: rangesFormatArr,
@@ -2072,6 +2162,65 @@
context.stroke();
}
+function drawActivePoint(points, color, shape, context, opts, option, seriesIndex) {
+ if(!opts.tooltip){
+ return
+ }
+ if(opts.tooltip.group.length>0 && opts.tooltip.group.includes(seriesIndex) == false){
+ return
+ }
+ var pointIndex = typeof opts.tooltip.index === 'number' ? opts.tooltip.index : opts.tooltip.index[opts.tooltip.group.indexOf(seriesIndex)];
+ context.beginPath();
+ if (option.activeType == 'hollow') {
+ context.setStrokeStyle(color);
+ context.setFillStyle(opts.background);
+ context.setLineWidth(2 * opts.pix);
+ } else {
+ context.setStrokeStyle("#ffffff");
+ context.setFillStyle(color);
+ context.setLineWidth(1 * opts.pix);
+ }
+ if (shape === 'diamond') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index ) {
+ context.moveTo(item.x, item.y - 4.5);
+ context.lineTo(item.x - 4.5, item.y);
+ context.lineTo(item.x, item.y + 4.5);
+ context.lineTo(item.x + 4.5, item.y);
+ context.lineTo(item.x, item.y - 4.5);
+ }
+ });
+ } else if (shape === 'circle') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x + 2.5 * opts.pix, item.y);
+ context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false);
+ }
+ });
+ } else if (shape === 'square') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x - 3.5, item.y - 3.5);
+ context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
+ }
+ });
+ } else if (shape === 'triangle') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x, item.y - 4.5);
+ context.lineTo(item.x - 4.5, item.y + 4.5);
+ context.lineTo(item.x + 4.5, item.y + 4.5);
+ context.lineTo(item.x, item.y - 4.5);
+ }
+ });
+ } else if (shape === 'none') {
+ return;
+ }
+ context.closePath();
+ context.fill();
+ context.stroke();
+}
+
function drawRingTitle(opts, config, context, center) {
var titlefontSize = opts.title.fontSize || config.titleFontSize;
var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
@@ -2140,10 +2289,74 @@
});
}
-function drawMountPointText(points, series, config, context, opts) {
+function drawColumePointText(points, series, config, context, opts) {
// 缁樺埗鏁版嵁鏂囨
var data = series.data;
var textOffset = series.textOffset ? series.textOffset : 0;
+ var Position = opts.extra.column.labelPosition;
+ points.forEach(function(item, index) {
+ if (item !== null) {
+ context.beginPath();
+ var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
+ context.setFontSize(fontSize);
+ context.setFillStyle(series.textColor || opts.fontColor);
+ var value = data[index]
+ if (typeof data[index] === 'object' && data[index] !== null) {
+ if (data[index].constructor.toString().indexOf('Array')>-1) {
+ value = data[index][1];
+ } else {
+ value = data[index].value
+ }
+ }
+ var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
+ context.setTextAlign('center');
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
+ if(item.y > series.zeroPoints){
+ startY = item.y + textOffset * opts.pix + fontSize;
+ }
+ if(Position == 'insideTop'){
+ startY = item.y + fontSize + textOffset * opts.pix;
+ if(item.y > series.zeroPoints){
+ startY = item.y - textOffset * opts.pix - 4 * opts.pix;
+ }
+ }
+ if(Position == 'center'){
+ startY = item.y + textOffset * opts.pix + (opts.height - opts.area[2] - item.y + fontSize)/2;
+ if(series.zeroPoints < opts.height - opts.area[2]){
+ startY = item.y + textOffset * opts.pix + (series.zeroPoints - item.y + fontSize)/2;
+ }
+ if(item.y > series.zeroPoints){
+ startY = item.y - textOffset * opts.pix - (item.y - series.zeroPoints - fontSize)/2;
+ }
+ if(opts.extra.column.type == 'stack'){
+ startY = item.y + textOffset * opts.pix + (item.y0 - item.y + fontSize)/2;
+ }
+ }
+ if(Position == 'bottom'){
+ startY = opts.height - opts.area[2] + textOffset * opts.pix - 4 * opts.pix;
+ if(series.zeroPoints < opts.height - opts.area[2]){
+ startY = series.zeroPoints + textOffset * opts.pix - 4 * opts.pix;
+ }
+ if(item.y > series.zeroPoints){
+ startY = series.zeroPoints - textOffset * opts.pix + fontSize + 2 * opts.pix;
+ }
+ if(opts.extra.column.type == 'stack'){
+ startY = item.y0 + textOffset * opts.pix - 4 * opts.pix;
+ }
+ }
+ context.fillText(String(formatVal), item.x, startY);
+ context.closePath();
+ context.stroke();
+ context.setTextAlign('left');
+ }
+ });
+}
+
+function drawMountPointText(points, series, config, context, opts, zeroPoints) {
+ // 缁樺埗鏁版嵁鏂囨
+ var data = series.data;
+ var textOffset = series.textOffset ? series.textOffset : 0;
+ var Position = opts.extra.mount.labelPosition;
points.forEach(function(item, index) {
if (item !== null) {
context.beginPath();
@@ -2153,7 +2366,11 @@
var value = item.value
var formatVal = series[index].formatter ? series[index].formatter(value,index,series,opts) : value;
context.setTextAlign('center');
- context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix);
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
+ if(item.y > zeroPoints){
+ startY = item.y + textOffset * opts.pix + fontSize;
+ }
+ context.fillText(String(formatVal), item.x, startY);
context.closePath();
context.stroke();
context.setTextAlign('left');
@@ -2187,7 +2404,12 @@
function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
radius -= gaugeOption.width / 2 + gaugeOption.labelOffset * opts.pix;
radius = radius < 10 ? 10 : radius;
- let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ let totalAngle;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
let totalNumber = gaugeOption.endNumber - gaugeOption.startNumber;
let splitNumber = totalNumber / gaugeOption.splitLine.splitNumber;
@@ -2232,24 +2454,26 @@
context.closePath();
context.fill();
}
- var pos = {
- x: (radius + config.radarLabelTextMargin * opts.pix) * Math.cos(angle),
- y: (radius + config.radarLabelTextMargin * opts.pix) * Math.sin(angle)
- };
- var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
- var startX = posRelativeCanvas.x;
- var startY = posRelativeCanvas.y;
- if (util.approximatelyEqual(pos.x, 0)) {
- startX -= measureText(opts.categories[index] || '', config.fontSize, context) / 2;
- } else if (pos.x < 0) {
- startX -= measureText(opts.categories[index] || '', config.fontSize, context);
+ if(radarOption.labelShow === true){
+ var pos = {
+ x: (radius + config.radarLabelTextMargin * opts.pix) * Math.cos(angle),
+ y: (radius + config.radarLabelTextMargin * opts.pix) * Math.sin(angle)
+ };
+ var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
+ var startX = posRelativeCanvas.x;
+ var startY = posRelativeCanvas.y;
+ if (util.approximatelyEqual(pos.x, 0)) {
+ startX -= measureText(opts.categories[index] || '', config.fontSize, context) / 2;
+ } else if (pos.x < 0) {
+ startX -= measureText(opts.categories[index] || '', config.fontSize, context);
+ }
+ context.beginPath();
+ context.setFontSize(config.fontSize);
+ context.setFillStyle(radarOption.labelColor || opts.fontColor);
+ context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
+ context.closePath();
+ context.stroke();
}
- context.beginPath();
- context.setFontSize(config.fontSize);
- context.setFillStyle(radarOption.labelColor || opts.fontColor);
- context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
- context.closePath();
- context.stroke();
});
}
@@ -2392,14 +2616,14 @@
context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
context.setLineWidth(1 * opts.pix);
- context.rect(textX - config.toolTipPadding, textY, textWidth + 2 * config.toolTipPadding, config.fontSize + 2 * config.toolTipPadding);
+ context.rect(textX - toolTipOption.boxPadding * opts.pix, textY, textWidth + 2 * toolTipOption.boxPadding * opts.pix, config.fontSize + 2 * toolTipOption.boxPadding * opts.pix);
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor);
- context.fillText(String(labelText), textX, textY + config.toolTipPadding + config.fontSize);
+ context.fillText(String(labelText), textX, textY + toolTipOption.boxPadding * opts.pix + config.fontSize);
context.closePath();
context.stroke();
}
@@ -2418,6 +2642,8 @@
let item = assign({}, {
lineColor: '#DE4A42',
showLabel: false,
+ labelFontSize: 13,
+ labelPadding: 6,
labelFontColor: '#666666',
labelBgColor: '#DFE8FF',
labelBgOpacity: 0.8,
@@ -2436,28 +2662,29 @@
context.stroke();
context.setLineDash([]);
if (item.showLabel) {
+ let fontSize = item.labelFontSize * opts.pix;
let labelText = item.labelText ? item.labelText : item.value;
- context.setFontSize(config.fontSize);
- let textWidth = measureText(labelText, config.fontSize, context);
- let bgWidth = textWidth + config.toolTipPadding * 2;
+ context.setFontSize(fontSize);
+ let textWidth = measureText(labelText, fontSize, context);
+ let bgWidth = textWidth + item.labelPadding * opts.pix * 2;
let bgStartX = item.labelAlign == 'left' ? opts.area[3] - bgWidth : opts.width - opts.area[1];
bgStartX += item.labelOffsetX;
- let bgStartY = item.y - 0.5 * config.fontSize - config.toolTipPadding;
+ let bgStartY = item.y - 0.5 * fontSize - item.labelPadding * opts.pix;
bgStartY += item.labelOffsetY;
- let textX = bgStartX + config.toolTipPadding;
+ let textX = bgStartX + item.labelPadding * opts.pix;
let textY = item.y;
context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity));
context.setStrokeStyle(item.labelBgColor);
context.setLineWidth(1 * opts.pix);
context.beginPath();
- context.rect(bgStartX, bgStartY, bgWidth, config.fontSize + 2 * config.toolTipPadding);
+ context.rect(bgStartX, bgStartY, bgWidth, fontSize + 2 * item.labelPadding * opts.pix);
context.closePath();
context.stroke();
context.fill();
- context.setFontSize(config.fontSize);
+ context.setFontSize(fontSize);
context.setTextAlign('left');
context.setFillStyle(item.labelFontColor);
- context.fillText(String(labelText), textX, bgStartY + config.fontSize + config.toolTipPadding/2);
+ context.fillText(String(labelText), textX, bgStartY + fontSize + item.labelPadding * opts.pix/2);
context.stroke();
context.setTextAlign('left');
}
@@ -2482,20 +2709,21 @@
context.stroke();
context.setLineDash([]);
if (toolTipOption.yAxisLabel) {
+ let boxPadding = toolTipOption.boxPadding * opts.pix;
let labelText = calTooltipYAxisData(opts.tooltip.offset.y, opts.series, opts, config, eachSpacing);
let widthArr = opts.chartData.yAxisData.yAxisWidth;
let tStartLeft = opts.area[3];
let tStartRight = opts.width - opts.area[1];
for (let i = 0; i < labelText.length; i++) {
- context.setFontSize(config.fontSize);
- let textWidth = measureText(labelText[i], config.fontSize, context);
+ context.setFontSize(toolTipOption.fontSize * opts.pix);
+ let textWidth = measureText(labelText[i], toolTipOption.fontSize * opts.pix, context);
let bgStartX, bgEndX, bgWidth;
if (widthArr[i].position == 'left') {
- bgStartX = tStartLeft - (textWidth + config.toolTipPadding * 2) - 2 * opts.pix;
- bgEndX = Math.max(bgStartX, bgStartX + textWidth + config.toolTipPadding * 2);
+ bgStartX = tStartLeft - (textWidth + boxPadding * 2) - 2 * opts.pix;
+ bgEndX = Math.max(bgStartX, bgStartX + textWidth + boxPadding * 2);
} else {
bgStartX = tStartRight + 2 * opts.pix;
- bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + config.toolTipPadding * 2);
+ bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + boxPadding * 2);
}
bgWidth = bgEndX - bgStartX;
let textX = bgStartX + (bgWidth - textWidth) / 2;
@@ -2504,7 +2732,7 @@
context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
context.setLineWidth(1 * opts.pix);
- context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 * config.toolTipPadding);
+ context.rect(bgStartX, textY - 0.5 * config.fontSize - boxPadding, bgWidth, config.fontSize + 2 * boxPadding);
context.closePath();
context.stroke();
context.fill();
@@ -2567,14 +2795,26 @@
borderWidth: 0,
borderRadius: 0,
borderOpacity: 0.7,
+ boxPadding: 3,
fontColor: '#FFFFFF',
+ fontSize: 13,
+ lineHeight: 20,
+ legendShow: true,
+ legendShape: 'auto',
splitLine: true,
}, opts.extra.tooltip);
if(toolTipOption.showCategory==true && opts.categories){
textList.unshift({text:opts.categories[opts.tooltip.index],color:null})
}
- var legendWidth = 4 * opts.pix;
+ var fontSize = toolTipOption.fontSize * opts.pix;
+ var lineHeight = toolTipOption.lineHeight * opts.pix;
+ var boxPadding = toolTipOption.boxPadding * opts.pix;
+ var legendWidth = fontSize;
var legendMarginRight = 5 * opts.pix;
+ if(toolTipOption.legendShow == false){
+ legendWidth = 0;
+ legendMarginRight = 0;
+ }
var arrowWidth = toolTipOption.showArrow ? 8 * opts.pix : 0;
var isOverRightBorder = false;
if (opts.type == 'line' || opts.type == 'mount' || opts.type == 'area' || opts.type == 'candle' || opts.type == 'mix') {
@@ -2588,10 +2828,10 @@
}, offset);
offset.y -= 8 * opts.pix;
var textWidth = textList.map(function(item) {
- return measureText(item.text, config.fontSize, context);
+ return measureText(item.text, fontSize, context);
});
- var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth);
- var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight;
+ var toolTipWidth = legendWidth + legendMarginRight + 4 * boxPadding + Math.max.apply(null, textWidth);
+ var toolTipHeight = 2 * boxPadding + textList.length * lineHeight;
if (toolTipOption.showBox == false) {
return
}
@@ -2604,13 +2844,16 @@
}
// draw background rect
context.beginPath();
- context.setFillStyle(hexToRgb(toolTipOption.bgColor || config.toolTipBackground, toolTipOption.bgOpacity || config.toolTipOpacity));
+ context.setFillStyle(hexToRgb(toolTipOption.bgColor, toolTipOption.bgOpacity));
context.setLineWidth(toolTipOption.borderWidth * opts.pix);
context.setStrokeStyle(hexToRgb(toolTipOption.borderColor, toolTipOption.borderOpacity));
var radius = toolTipOption.borderRadius;
if (isOverRightBorder) {
// 澧炲姞宸︿晶浠嶇劧瓒呭嚭鐨勫垽鏂�
if(toolTipWidth + arrowWidth > opts.width){
+ offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
+ }
+ if(toolTipWidth > offset.x){
offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
}
if (toolTipOption.showArrow) {
@@ -2648,33 +2891,68 @@
context.stroke();
}
// draw legend
- textList.forEach(function(item, index) {
- if (item.color !== null) {
- context.beginPath();
- context.setFillStyle(item.color);
- var startX = offset.x + arrowWidth + 2 * config.toolTipPadding;
- var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding + 1;
- if (isOverRightBorder) {
- startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding;
+ if(toolTipOption.legendShow){
+ textList.forEach(function(item, index) {
+ if (item.color !== null) {
+ context.beginPath();
+ context.setFillStyle(item.color);
+ var startX = offset.x + arrowWidth + 2 * boxPadding;
+ var startY = offset.y + (lineHeight - fontSize) / 2 + lineHeight * index + boxPadding + 1;
+ if (isOverRightBorder) {
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding;
+ }
+ switch (item.legendShape) {
+ case 'line':
+ context.moveTo(startX, startY + 0.5 * legendWidth - 2 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 2 * opts.pix, legendWidth, 4 * opts.pix);
+ break;
+ case 'triangle':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ break;
+ case 'diamond':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ break;
+ case 'circle':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.arc(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth, 5 * opts.pix, 0, 2 * Math.PI);
+ break;
+ case 'rect':
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
+ break;
+ case 'square':
+ context.moveTo(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix);
+ break;
+ default:
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
+ }
+ context.closePath();
+ context.fill();
}
- context.fillRect(startX, startY, legendWidth, config.fontSize);
- // 鍦嗗舰鍥句緥璇锋敞閲婁笂琛岋紝骞舵妸涓嬭鍙栨秷娉ㄩ噴
- // context.arc(startX + legendWidth / 2 , startY + opts.fontSize / 2, 4 * opts.pix, 0, 2 * Math.PI);
- context.closePath();
- context.fill();
- }
- });
+ });
+ }
+
// draw text list
textList.forEach(function(item, index) {
- var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight;
+ var startX = offset.x + arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
if (isOverRightBorder) {
- startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight;
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
}
- var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding;
+ var startY = offset.y + lineHeight * index + (lineHeight - fontSize)/2 - 1 + boxPadding + fontSize;
context.beginPath();
- context.setFontSize(config.fontSize);
+ context.setFontSize(fontSize);
+ context.setTextBaseline('normal');
context.setFillStyle(toolTipOption.fontColor);
- context.fillText(item.text, startX, startY + config.fontSize);
+ context.fillText(item.text, startX, startY);
context.closePath();
context.stroke();
});
@@ -2697,6 +2975,7 @@
linearOpacity: 1,
customColor: [],
colorStop: 0,
+ labelPosition: 'outside'
}, opts.extra.column);
let calPoints = [];
context.save();
@@ -2716,10 +2995,16 @@
ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
minRange = ranges.pop();
maxRange = ranges.shift();
+
+ // 璁＄畻0杞村潗鏍�
+ let spacingValid = opts.height - opts.area[0] - opts.area[2];
+ let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
+ eachSeries.zeroPoints = zeroPoints;
var data = eachSeries.data;
switch (columnOption.type) {
case 'group':
- var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process);
var tooltipPoints = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
calPoints.push(tooltipPoints);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
@@ -2733,7 +3018,7 @@
var fillColor = item.color || eachSeries.color
var strokeColor = item.color || eachSeries.color
if (columnOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (columnOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity));
@@ -2748,11 +3033,14 @@
// 鍦嗚杈规
if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
const left = startX;
- const top = item.y;
+ const top = item.y > zeroPoints ? zeroPoints : item.y;
const width = item.width;
- const height = opts.height - opts.area[2] - item.y;
+ const height = Math.abs(zeroPoints - item.y);
if (columnOption.barBorderCircle) {
columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
+ }
+ if(item.y > zeroPoints){
+ columnOption.barBorderRadius = [0, 0,width / 2, width / 2];
}
let [r0, r1, r2, r3] = columnOption.barBorderRadius;
let minRadius = Math.min(width/2,height/2);
@@ -2771,8 +3059,8 @@
} else {
context.moveTo(startX, item.y);
context.lineTo(startX + item.width, item.y);
- context.lineTo(startX + item.width, opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
context.lineTo(startX, item.y);
context.setLineWidth(1)
context.setStrokeStyle(strokeColor);
@@ -2833,7 +3121,7 @@
const left = startX;
const top = item.y;
const width = item.width;
- const height = opts.height - opts.area[2] - item.y;
+ const height = zeroPoints - item.y;
if (columnOption.barBorderCircle) {
columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
}
@@ -2855,8 +3143,8 @@
}else{
context.moveTo(startX, item.y);
context.lineTo(startX + item.width, item.y);
- context.lineTo(startX + item.width, opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
context.lineTo(startX, item.y);
context.fill();
}
@@ -2879,17 +3167,17 @@
var data = eachSeries.data;
switch (columnOption.type) {
case 'group':
- var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
case 'stack':
var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
case 'meter':
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
}
});
@@ -2934,7 +3222,13 @@
ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
minRange = ranges.pop();
maxRange = ranges.shift();
- var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, process);
+
+ // 璁＄畻0杞村潗鏍�
+ let spacingValid = opts.height - opts.area[0] - opts.area[2];
+ let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
+
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
switch (mountOption.type) {
case 'bar':
for (let i = 0; i < points.length; i++) {
@@ -2946,7 +3240,7 @@
var fillColor = item.color || series[i].color
var strokeColor = item.color || series[i].color
if (mountOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (mountOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
@@ -2961,11 +3255,14 @@
// 鍦嗚杈规
if ((mountOption.barBorderRadius && mountOption.barBorderRadius.length === 4) || mountOption.barBorderCircle === true) {
const left = startX;
- const top = item.y;
+ const top = item.y > zeroPoints ? zeroPoints : item.y;
const width = item.width;
- const height = opts.height - opts.area[2] - item.y - mountOption.borderWidth * opts.pix / 2;
+ const height = Math.abs(zeroPoints - item.y);
if (mountOption.barBorderCircle) {
mountOption.barBorderRadius = [width / 2, width / 2, 0, 0];
+ }
+ if(item.y > zeroPoints){
+ mountOption.barBorderRadius = [0, 0,width / 2, width / 2];
}
let [r0, r1, r2, r3] = mountOption.barBorderRadius;
let minRadius = Math.min(width/2,height/2);
@@ -2984,8 +3281,8 @@
} else {
context.moveTo(startX, item.y);
context.lineTo(startX + item.width, item.y);
- context.lineTo(startX + item.width, opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
context.lineTo(startX, item.y);
}
context.setStrokeStyle(strokeColor);
@@ -3009,7 +3306,7 @@
var fillColor = item.color || series[i].color
var strokeColor = item.color || series[i].color
if (mountOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (mountOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
@@ -3021,9 +3318,9 @@
}
fillColor = grd
}
- context.moveTo(startX, opts.height - opts.area[2]);
+ context.moveTo(startX, zeroPoints);
context.lineTo(item.x, item.y);
- context.lineTo(startX + item.width, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, zeroPoints);
context.setStrokeStyle(strokeColor);
context.setFillStyle(fillColor);
if(mountOption.borderWidth > 0){
@@ -3044,7 +3341,7 @@
var fillColor = item.color || series[i].color
var strokeColor = item.color || series[i].color
if (mountOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (mountOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
@@ -3056,9 +3353,9 @@
}
fillColor = grd
}
- context.moveTo(startX, opts.height - opts.area[2]);
- context.bezierCurveTo(item.x - item.width/4, opts.height - opts.area[2], item.x - item.width/4, item.y, item.x, item.y);
- context.bezierCurveTo(item.x + item.width/4, item.y, item.x + item.width/4, opts.height - opts.area[2], startX + item.width, opts.height - opts.area[2]);
+ context.moveTo(startX, zeroPoints);
+ context.bezierCurveTo(item.x - item.width/4, zeroPoints, item.x - item.width/4, item.y, item.x, item.y);
+ context.bezierCurveTo(item.x + item.width/4, item.y, item.x + item.width/4, zeroPoints, startX + item.width, zeroPoints);
context.setStrokeStyle(strokeColor);
context.setFillStyle(fillColor);
if(mountOption.borderWidth > 0){
@@ -3079,7 +3376,7 @@
var fillColor = item.color || series[i].color
var strokeColor = item.color || series[i].color
if (mountOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (mountOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
@@ -3091,9 +3388,9 @@
}
fillColor = grd
}
- context.moveTo(startX, opts.height - opts.area[2]);
- context.quadraticCurveTo(item.x - 0, opts.height - opts.area[2] - height/4, item.x, item.y);
- context.quadraticCurveTo(item.x + 0, opts.height - opts.area[2] - height/4, startX + item.width, opts.height - opts.area[2])
+ context.moveTo(startX, zeroPoints);
+ context.quadraticCurveTo(item.x - 0, zeroPoints - height/4, item.x, item.y);
+ context.quadraticCurveTo(item.x + 0, zeroPoints - height/4, startX + item.width, zeroPoints)
context.setStrokeStyle(strokeColor);
context.setFillStyle(fillColor);
if(mountOption.borderWidth > 0){
@@ -3111,8 +3408,8 @@
ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
minRange = ranges.pop();
maxRange = ranges.shift();
- var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, process);
- drawMountPointText(points, series, config, context, opts);
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
+ drawMountPointText(points, series, config, context, opts, zeroPoints);
}
context.restore();
return {
@@ -3417,7 +3714,8 @@
opacity: 0.2,
addLine: false,
width: 2,
- gradient: false
+ gradient: false,
+ activeType: 'none'
}, opts.extra.area);
let xAxisData = opts.chartData.xAxisData,
xAxisPoints = xAxisData.xAxisPoints,
@@ -3504,10 +3802,10 @@
} else {
let item = points[0];
context.moveTo(item.x - eachSpacing / 2, item.y);
- context.lineTo(item.x + eachSpacing / 2, item.y);
- context.lineTo(item.x + eachSpacing / 2, endY);
- context.lineTo(item.x - eachSpacing / 2, endY);
- context.moveTo(item.x - eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, endY);
+ // context.lineTo(item.x - eachSpacing / 2, endY);
+ // context.moveTo(item.x - eachSpacing / 2, item.y);
}
context.closePath();
context.fill();
@@ -3523,7 +3821,7 @@
context.setLineWidth(areaOption.width * opts.pix);
if (points.length === 1) {
context.moveTo(points[0].x, points[0].y);
- context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
} else {
context.moveTo(points[0].x, points[0].y);
let startPoint = 0;
@@ -3575,6 +3873,7 @@
if (opts.dataPointShape !== false) {
drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
}
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, areaOption,seriesIndex);
});
if (opts.dataLabel !== false && process === 1) {
@@ -3747,7 +4046,11 @@
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var lineOption = assign({}, {
type: 'straight',
- width: 2
+ width: 2,
+ activeType: 'none',
+ linearType: 'none',
+ onShadow: false,
+ animation: 'vertical',
}, opts.extra.line);
lineOption.width *= opts.pix;
let xAxisData = opts.chartData.xAxisData,
@@ -3763,12 +4066,18 @@
rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
}
series.forEach(function(eachSeries, seriesIndex) {
+ // 杩欐寰堢濂囩殑浠ｇ爜鐢ㄤ簬瑙ｅ喅ios16鐨剆etStrokeStyle澶辨晥鐨刡ug
+ context.beginPath();
+ context.setStrokeStyle(eachSeries.color);
+ context.moveTo(-10000, -10000);
+ context.lineTo(-10001, -10001);
+ context.stroke();
let ranges, minRange, maxRange;
ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
minRange = ranges.pop();
maxRange = ranges.shift();
var data = eachSeries.data;
- var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
+ var points = getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process);
calPoints.push(points);
var splitPointList = splitPoints(points,eachSeries);
if (eachSeries.lineType == 'dash') {
@@ -3777,12 +4086,25 @@
context.setLineDash([dashLength, dashLength]);
}
context.beginPath();
- context.setStrokeStyle(eachSeries.color);
+ var strokeColor = eachSeries.color;
+ if (lineOption.linearType !== 'none' && eachSeries.linearColor && eachSeries.linearColor.length > 0) {
+ var grd = context.createLinearGradient(opts.chartData.xAxisData.startX, opts.height/2, opts.chartData.xAxisData.endX, opts.height/2);
+ for (var i = 0; i < eachSeries.linearColor.length; i++) {
+ grd.addColorStop(eachSeries.linearColor[i][0], hexToRgb(eachSeries.linearColor[i][1], 1));
+ }
+ strokeColor = grd
+ }
+ context.setStrokeStyle(strokeColor);
+ if (lineOption.onShadow == true && eachSeries.setShadow && eachSeries.setShadow.length > 0) {
+ context.setShadow(eachSeries.setShadow[0], eachSeries.setShadow[1], eachSeries.setShadow[2], eachSeries.setShadow[3]);
+ }else{
+ context.setShadow(0, 0, 0, 'rgba(0,0,0,0)');
+ }
context.setLineWidth(lineOption.width);
splitPointList.forEach(function(points, index) {
if (points.length === 1) {
context.moveTo(points[0].x, points[0].y);
- context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
} else {
context.moveTo(points[0].x, points[0].y);
let startPoint = 0;
@@ -3832,6 +4154,7 @@
if (opts.dataPointShape !== false) {
drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
}
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, lineOption);
});
if (opts.dataLabel !== false && process === 1) {
series.forEach(function(eachSeries, seriesIndex) {
@@ -4020,10 +4343,10 @@
} else {
let item = points[0];
context.moveTo(item.x - eachSpacing / 2, item.y);
- context.lineTo(item.x + eachSpacing / 2, item.y);
- context.lineTo(item.x + eachSpacing / 2, endY);
- context.lineTo(item.x - eachSpacing / 2, endY);
- context.moveTo(item.x - eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, item.y);
+ // context.lineTo(item.x + eachSpacing / 2, endY);
+ // context.lineTo(item.x - eachSpacing / 2, endY);
+ // context.moveTo(item.x - eachSpacing / 2, item.y);
}
context.closePath();
context.fill();
@@ -4043,7 +4366,7 @@
context.setLineWidth(lineOption.width * opts.pix);
if (points.length === 1) {
context.moveTo(points[0].x, points[0].y);
- context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
+ // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
} else {
context.moveTo(points[0].x, points[0].y);
let startPoint = 0;
@@ -4256,11 +4579,11 @@
// 濡傛灉鍦ㄤ富瑙嗗浘鍖哄煙鍐�
var _scrollDistance_ = opts._scrollDistance_ || 0;
var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
- if((truePoints - Math.abs(_scrollDistance_)) >= opts.area[3] && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1])){
+ if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
context.beginPath();
context.setFontSize(xAxisFontSize);
context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
- context.fillText(String(xitem), xAxisPoints[index] + offset, startY + xAxisFontSize + (config.xAxisHeight - scrollHeight - xAxisFontSize) / 2);
+ context.fillText(String(xitem), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix);
context.closePath();
context.stroke();
}
@@ -4271,7 +4594,7 @@
// 濡傛灉鍦ㄤ富瑙嗗浘鍖哄煙鍐�
var _scrollDistance_ = opts._scrollDistance_ || 0;
var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
- if((truePoints - Math.abs(_scrollDistance_)) >= opts.area[3] && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1])){
+ if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
context.save();
context.beginPath();
context.setFontSize(xAxisFontSize);
@@ -4285,7 +4608,7 @@
if (opts.xAxis.scrollShow) {
scrollHeight = 6 * opts.pix;
}
- var offsetY = startY + 6 * opts.pix + xAxisFontSize - xAxisFontSize * Math.abs(Math.sin(config._xAxisTextAngle_));
+ var offsetY = startY + opts.xAxis.marginTop * opts.pix + xAxisFontSize - xAxisFontSize * Math.abs(Math.sin(config._xAxisTextAngle_));
if(opts.xAxis.rotateAngle < 0){
offsetX -= xAxisFontSize / 2;
textWidth = 0;
@@ -4304,6 +4627,17 @@
}
}
context.restore();
+
+ //鐢籜杞存爣棰�
+ if (opts.xAxis.title) {
+ context.beginPath();
+ context.setFontSize(opts.xAxis.titleFontSize * opts.pix);
+ context.setFillStyle(opts.xAxis.titleFontColor);
+ context.fillText(String(opts.xAxis.title), opts.width - opts.area[1] + opts.xAxis.titleOffsetX * opts.pix,opts.height - opts.area[2] + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.titleFontSize) * opts.pix / 2 + (opts.xAxis.titleFontSize + opts.xAxis.titleOffsetY) * opts.pix);
+ context.closePath();
+ context.stroke();
+ }
+
//缁樺埗X杞磋酱绾�
if (opts.xAxis.axisLine) {
context.beginPath();
@@ -4327,7 +4661,7 @@
let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1);
if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1 ){
if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
- TotalWidth += (opts.extra.mount.widthRatio - 1)*xAxiseachSpacing;
+ TotalWidth += (opts.extra.mount.widthRatio - 1) * xAxiseachSpacing;
}
let endX = startX + TotalWidth;
let points = [];
@@ -4768,6 +5102,9 @@
var radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding);
radius = radius < 10 ? 10 : radius;
var minRadius = roseOption.minRadius || radius * 0.5;
+ if(radius < minRadius){
+ radius = minRadius + 10;
+ }
series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process);
var activeRadius = roseOption.activeRadius * opts.pix;
roseOption.customColor = fillCustomColor(roseOption.linearType, roseOption.customColor, series, config);
@@ -4954,7 +5291,11 @@
context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, gaugeOption.endAngle * Math.PI, false);
context.stroke();
//## 绗簩姝ョ敾鍒诲害绾�
- totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
@@ -5026,7 +5367,11 @@
}
context.save();
//鐢诲埢搴︾嚎
- totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
@@ -5106,6 +5451,7 @@
gridEval:1,
axisLabel:false,
axisLabelTofix:0,
+ labelShow:true,
labelColor:'#666666',
labelPointShow:false,
labelPointRadius:3,
@@ -5127,6 +5473,7 @@
var radius = Math.min(xr - (getMaxTextListLength(opts.categories, config.fontSize, context) + config.radarLabelTextMargin), yr - config.radarLabelTextMargin);
radius -= config.radarLabelTextMargin * opts.pix;
radius = radius < 10 ? 10 : radius;
+ radius = radarOption.radius ? radarOption.radius : radius;
// 鐢诲垎鍓茬嚎
context.beginPath();
context.setLineWidth(1 * opts.pix);
@@ -5955,6 +6302,9 @@
function drawCanvas(opts, context) {
+ context.save();
+ context.translate(0, 0.5);
+ context.restore();
context.draw();
}
@@ -6675,12 +7025,20 @@
disableGrid: false,
splitNumber: 5,
calibration:false,
+ fontColor: '#666666',
+ fontSize: 13,
+ lineHeight: 20,
+ marginTop: 0,
gridType: 'solid',
dashLength: 4,
scrollAlign: 'left',
boundaryGap: 'center',
axisLine: true,
- axisLineColor: '#cccccc'
+ axisLineColor: '#cccccc',
+ titleFontSize: 13,
+ titleOffsetY: 0,
+ titleOffsetX: 0,
+ titleFontColor: '#666666'
}, opts.xAxis);
opts.xAxis.scrollPosition = opts.xAxis.scrollAlign;
opts.legend = assign({}, {
@@ -6699,7 +7057,11 @@
formatter: {},
hiddenColor: '#CECECE'
}, opts.legend);
- opts.extra = assign({}, opts.extra);
+ opts.extra = assign({
+ tooltip:{
+ legendShape: 'auto'
+ }
+ }, opts.extra);
opts.rotate = opts.rotate ? true : false;
opts.animation = opts.animation ? true : false;
opts.rotate = opts.rotate ? true : false;
@@ -6730,15 +7092,9 @@
//閫傞厤楂樺垎灞�
opts.padding = opts.padding ? opts.padding : config$$1.padding;
config$$1.yAxisWidth = config.yAxisWidth * opts.pix;
- config$$1.xAxisHeight = config.xAxisHeight * opts.pix;
- if (opts.enableScroll && opts.xAxis.scrollShow) {
- config$$1.xAxisHeight += 6 * opts.pix;
- }
config$$1.fontSize = opts.fontSize * opts.pix;
config$$1.titleFontSize = config.titleFontSize * opts.pix;
config$$1.subtitleFontSize = config.subtitleFontSize * opts.pix;
- config$$1.toolTipPadding = config.toolTipPadding * opts.pix;
- config$$1.toolTipLineHeight = config.toolTipLineHeight * opts.pix;
if(!opts.context){
throw new Error('[uCharts] 鏈幏鍙栧埌context锛佹敞鎰忥細v2.0鐗堟湰鍚庯紝闇�瑕佽嚜琛岃幏鍙朿anvas鐨勭粯鍥句笂涓嬫枃骞朵紶鍏pts.context锛�');
}
@@ -6761,6 +7117,15 @@
}
this.context.setTextAlign = function(e) {
return this.textAlign = e;
+ }
+ this.context.setTextBaseline = function(e) {
+ return this.textBaseline = e;
+ }
+ this.context.setShadow = function(offsetX,offsetY,blur,color) {
+ this.shadowColor = color;
+ this.shadowOffsetX = offsetX;
+ this.shadowOffsetY = offsetY;
+ this.shadowBlur = blur;
}
this.context.draw = function() {}
}
@@ -7065,7 +7430,8 @@
textList: option.textList !== undefined ? option.textList : textList,
offset: option.offset !== undefined ? option.offset : offset,
option: option,
- index: index
+ index: index,
+ group: current.group
};
}
}
@@ -7078,7 +7444,8 @@
var seriesData = assign({}, opts._series_[index]);
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: opts.chartData.calPoints[index].x,
@@ -7171,7 +7538,8 @@
var seriesData = assign({}, opts._series_[index]);
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -7194,7 +7562,8 @@
seriesData.name = seriesData.properties.name
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -7217,7 +7586,8 @@
var seriesData = assign({}, this.opts.series[index]);
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -7242,7 +7612,8 @@
var textList = seriesData.map((item) => {
return {
text: option.formatter ? option.formatter(item, this.opts.categories[index], index, this.opts) : item.name + ': ' + item.data,
- color: item.color
+ color: item.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? item.legendShape : this.opts.extra.tooltip.legendShape
};
});
var offset = {
--
Gitblit v1.9.1