在QT论坛上看到某个哥们写的,还没试,但是感觉还不错,先把代码存着。
据说是用canvas画的。
import QtQuick 2.15
import QtCharts 2.15
import "qrc:/"
ChartView {
id: root
property alias axisX: axisXId
property alias axisY: axisYId
property real yAxisLowerBound: 0
property real yAxisUpperBound: 25
property real xAxisLowerBound: 0
property real xAxisUpperBound: 1000
property string labelFontFamily: Style.primaryFont
property int labelFontSize: 16
property color labelFontColor: Style.colorWhite
QtObject {
id: internal
property var context: null
}
margins.top:0
margins.bottom:0
margins.left:0
margins.right:0
//antialiasing: true
backgroundColor: "transparent"
legend.visible: false
property var backgroundPaint: function() {
drawCachedZone(220, 11, 450, 19, "#99FFFFFF");
drawXCachedZone(yAxisLowerBound, 100, "#99FFFFFF");
}
property var foregroundPaint: function() {
drawYTick(20, Style.colorError, 2);
drawYTick(10, Style.colorFailure, 2);
drawXTick(200, Style.colorSuccess, 2);
drawXTick(500, Style.colorVariant, 2);
drawXPeak(800, 22, Style.colorAccent);
drawXPit(900, 8, Style.colorWarning);
drawXPoint(850, 15, Style.colorSuccess);
drawYPeak(400, 4, Style.colorAccent);
drawYPit(300, 3, Style.colorWarning);
drawYPoint(200, 2, Style.colorSuccess);
drawBox(600, 2, 700, 8, Style.colorWarning, 3);
}
function repaintCanvas() {
backgroundCanvas.requestPaint();
foregroundCanvas.requestPaint();
}
function drawYTick(y, color, lineWidth) {
drawLine(xAxisLowerBound, y, xAxisUpperBound, y, color, lineWidth);
drawYLabel(y, Code.floatToStringRound(y,1), Style.colorWhite);
}
function drawXTick(x, color, lineWidth) {
drawLine(x, yAxisLowerBound, x, yAxisUpperBound, color, lineWidth)
drawXLabel(x, Code.floatToStringRound(x,1), Style.colorWhite);
}
function drawBox(startX, startY, endX, endY, color, lineWidth) {
drawLine(startX, startY, startX, endY, color, lineWidth);
drawLine(startX, endY, endX, endY, color, lineWidth);
drawLine(endX, endY, endX, startY, color, lineWidth);
drawLine(endX, startY, startX, startY, color, lineWidth);
}
function drawXPit(x, y, color) {
drawLine(x, yAxisLowerBound, x, y, color, 1)
drawXLabel(x, Code.floatToStringRound(x,1), color);
drawTrianglePoint(x, y, color, 180)
}
function drawXPeak(x, y, color) {
drawLine(x, yAxisLowerBound, x, y, color, 1)
drawXLabel(x, Code.floatToStringRound(x,1), color);
drawTrianglePoint(x, y, color, 0)
}
function drawXPoint(x, y, color) {
drawLine(x, yAxisLowerBound, x, y, color, 1)
drawXLabel(x, Code.floatToStringRound(x,1), color);
drawSquarePoint(x, y, color);
}
function drawYPit(x, y, color) {
drawLine(x, y, xAxisLowerBound, y, color, 1)
drawYLabel(y, Code.floatToStringRound(y,1), color);
drawTrianglePoint(x, y, color, 270)
}
function drawYPeak(x, y, color) {
drawLine(x, y, xAxisLowerBound, y, color, 1)
drawYLabel(y, Code.floatToStringRound(y,1), color);
drawTrianglePoint(x, y, color, 90)
}
function drawYPoint(x, y, color) {
drawLine(x, y, xAxisLowerBound, y, color, 1)
drawYLabel(y, Code.floatToStringRound(y,1), color);
drawSquarePoint(x, y, color);
}
function drawYLabel(y, text, color) {
var ctx = internal.context
var yy = root.mapToPosition(Qt.point(0,y)).y;
ctx.save();
ctx.fillStyle = color
ctx.translate(root.plotArea.x, yy);
ctx.textAlign = "right";
ctx.fillText(text, -5, root.labelFontSize/3);
ctx.restore();
}
function drawXLabel(x, text, color) {
var ctx = internal.context
var xx = root.mapToPosition(Qt.point(x,0)).x;
ctx.save();
ctx.fillStyle = color
ctx.translate(xx, root.plotArea.y+root.plotArea.height);
ctx.textAlign = "center";
ctx.fillText(text, 0, root.labelFontSize);
ctx.restore();
}
function drawText(x, y, text, color) {
var ctx = internal.context
var point = root.mapToPosition(Qt.point(x,y));
ctx.save();
ctx.fillStyle = color
ctx.translate(point.x, point.y);
ctx.textAlign = "center";
ctx.fillText(text, 0, root.labelFontSize/3);
ctx.restore();
}
function drawLine(startX, startY, endX, endY, color, lineWidth) {
var ctx = internal.context
ctx.save();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.beginPath();
var pointStart = root.mapToPosition(Qt.point(startX,startY));
var pointEnd = root.mapToPosition(Qt.point(endX,endY));
ctx.moveTo(pointStart.x,pointStart.y);
ctx.lineTo(pointEnd.x,pointEnd.y);
ctx.stroke();
ctx.restore();
}
function drawYCachedZone(startY, endY, color) {
drawCachedZone(xAxisLowerBound, startY, xAxisUpperBound, endY, color);
}
function drawXCachedZone(startX, endX, color) {
drawCachedZone(startX, yAxisLowerBound, endX, yAxisUpperBound, color);
}
function drawCachedZone(startX, startY, endX, endY, color) {
var ctx = internal.context
ctx.save();
ctx.beginPath();
ctx.fillStyle = color
var pointStart = root.mapToPosition(Qt.point(startX,startY));
var pointEnd = root.mapToPosition(Qt.point(endX,endY));
ctx.fillRect(pointStart.x, pointStart.y, pointEnd.x-pointStart.x, pointEnd.y-pointStart.y);
ctx.stroke();
ctx.restore();
}
function drawTrianglePoint(x, y, color, rotation) {
var ctx = internal.context
var point = root.mapToPosition(Qt.point(x,y));
ctx.save();
ctx.translate(point.x, point.y);
ctx.rotate(Code.degToRad(rotation))
ctx.moveTo(0, 0);
ctx.lineTo(-10, -10);
ctx.lineTo(+10, -10);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
function drawSquarePoint(x, y, color) {
var ctx = internal.context
var point = root.mapToPosition(Qt.point(x,y));
ctx.save();
ctx.moveTo(point.x-5, point.y-5);
ctx.lineTo(point.x-5, point.y+5);
ctx.lineTo(point.x+5, point.y+5);
ctx.lineTo(point.x+5, point.y-5);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
onPlotAreaChanged: repaintCanvas()
Canvas{
id: foregroundCanvas
anchors.fill: root
contextType: "2d"
renderStrategy: Canvas.Threaded
renderTarget: Canvas.FramebufferObject
onPaint: {
context.reset();
// Load font only once since it is a heavy operation
context.font = '%1px "%2"'.arg(root.labelFontSize).arg(root.labelFontFamily);
internal.context=context;
root.foregroundPaint();
}
}
Canvas{
id: backgroundCanvas
z: -1
anchors.fill: root
contextType: "2d"
renderStrategy: Canvas.Threaded
renderTarget: Canvas.FramebufferObject
onPaint: {
context.reset();
// Load font only once since it is a heavy operation
context.font = '%1px "%2"'.arg(root.labelFontSize).arg(root.labelFontFamily);
internal.context=context;
root.backgroundPaint();
}
}
ValueAxis {
id: axisXId
min: xAxisLowerBound
max: xAxisUpperBound
tickCount: 2
labelsVisible: true
labelsColor: root.labelFontColor
labelsFont.family: root.labelFontFamily
labelsFont.pixelSize: root.labelFontSize
}
ValueAxis {
id: axisYId
min: yAxisLowerBound
max: yAxisUpperBound
tickCount: 2
labelsVisible: true
labelsColor: root.labelFontColor
labelsFont.family: root.labelFontFamily
labelsFont.pixelSize: root.labelFontSize
}
}